C3.js で折れ線グラフを描画する

## 概要

- D3.js のラッパーライブラリ C3.js で折れ線グラフを描画する
- 環境: C3.js 0.7.15 + D3.js 5.15.1

## C3.js と D3.js のダウンロード

[Release v0\.7\.15 · c3js/c3 · GitHub](https://github.com/c3js/c3/releases/tag/v0.7.15) から v0.7.15.zip をダウンロードして展開する。c3.css と c3.min.js を取り出す。

[Release v5\.15\.1 · d3/d3 · GitHub](https://github.com/d3/d3/releases/tag/v5.15.1) から d3.zip をダウンロードして展開する。d3.min.js を取り出す。

## シンプルな折れ線グラフを描画するサンプル

<img width="655" alt="c3-js-chart-1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139365/ee03ea41-7a0a-654f-ca50-b717a73fff27.png">

```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>C3.js で折れ線グラフを描画する</title>
<link href="c3.css" rel="stylesheet"><!-- c3.css を読み込む -->
</head>
<body>

<div id="my-container" style="width: 640px; height: 480px; border: solid 1px red">
  <div id="my-chart"></div>
</div>

<script src="d3.min.js"></script><!-- D3.js を読み込む -->
<script src="c3.min.js"></script><!-- C3.js を読み込む -->
<script>
let chart = c3.generate({
  bindto: '#my-chart',
  size: { width: 640, height: 480 }, // グラフ描画領域のサイズ
  data: {
    columns: [
      ['データ1', 30, 200, 100, 400, 150, 250],
      ['データ2', 50, 20, 10, 40, 15, 25]
    ],
    labels: true // それぞれの点に数値を表示
  },
  axis: {
    x: {
      label: {
        text: 'X軸',
        position: 'outer-middle'
      }
    },
    y: {
      label: {
        text: 'Y軸',
        position: 'outer-middle'
      }
    }
  }
});
</script>

</body>
</html>
```

## 時系列データの折れ線グラフを描画するサンプル

<img width="813" alt="c3-js-chart-2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139365/192b0e70-bfcb-8a58-0256-8503935f1690.png">

```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>都道府県別のPCR検査陽性者累積数</title>
<link href="c3.css" rel="stylesheet"><!-- c3.css を読み込む -->
</head>
<body>

<div id="my-chart"></div>

<script src="d3.min.js"></script><!-- D3.js を読み込む -->
<script src="c3.min.js"></script><!-- C3.js を読み込む -->
<script>
let chart = c3.generate({
  bindto: '#my-chart',
  size: { width: 800, height: 600 },
  data: {
    x: 'mydate', // 時系列インデックスの項目名
    xFormat: '%m%d', // 時系列インデックスの日付フォーマット
    columns: [
      ['mydate', '0325', '0326', '0327', '0328', '0329', '0330', '0331', '0401', '0402', '0403', '0404'],
      ['東京都', 160, 201, 227, 227, 368, 436, 449, 527, 527, 690, 779],
      ['大阪府', 123, 129, 136, 154, 192, 209, 217, 245, 245, 312, 347],
      ['愛知県', 139, 144, 147, 150, 164, 164, 170, 176, 176, 186, 198],
      ['千葉県', 46, 51, 54, 60, 126, 160, 160, 164, 164, 181, 192],
      ['北海道', 162, 166, 167, 168, 172, 176, 177, 177, 177, 185, 190],
      ['神奈川県', 73, 77, 82, 88, 104, 107, 115, 120, 120, 153, 181],
      ['兵庫県', 87, 87, 87, 90, 125, 132, 136, 147, 147, 167, 172],
    ]
  },
  axis: {
    x: {
      type: 'timeseries',
      tick: {
          format: '%m月%d日'
      },
      label: {
        text: '日',
        position: 'outer-middle'
      }
    },
    y: {
      label: {
        text: 'PCR検査陽性者の累積',
        position: 'outer-middle'
      }
    }
  }
});
</script>

</body>
</html>
```

## 参考資料

- [C3\.js \| D3\-based reusable chart library](https://c3js.org/)
  - [Getting Started](https://c3js.org/gettingstarted.html)
  - [Reference](https://c3js.org/reference.html)
  - [Timeseries Chart](https://c3js.org/samples/timeseries.html)