いかにして問題を解くか

このサイトはGoogle Analyticsを利用しています。

Chart JS V2.0 Line Chart Multi

サンプルの内容

2組のデータを同一Chart内に表示している。 また、Chart のタイトルとX,Y軸のタイトルを追加した。

f:id:katogiso-tech:20160827173044p:plain

Base からの主な修正点

Global settings

  1. グラフのラインとx軸の間は色を塗らない
  2. グラフのラインを直線にする。
  3. アニメーションを無効化
  Chart.defaults.global.elements.line.fill    = false; // 1.
  Chart.defaults.global.elements.line.tension = 0;     // 2.
  Chart.defaults.global.animation             = 0;     // 3.

 データの追加

データは配列として datasets へ渡す。

datasets: [
  {
    label:       "1st Line Chart",
    data:        [ 27, 33, 49 ],
    borderColor: '#' + pal[3],
    backgroundColor: '#' + pal[3],
  },
  {
    label: "2nd Line Chart",
    data:  [ 10, 50, 22 ],
    borderColor: '#' + pal[4],
    backgroundColor: '#' + pal[4]
  }
]

 配色

ラインに色を設定した。

data: {
  datasets: [
    {
      borderColor:     '#ff00aa'
      backgroundColor: '#ff00aa'
    },
  ]
}

 凡例

凡例の位置をグラフの下に変更した。

options: {
  responsive: false,
  legend: {
    position: 'bottom',
  },
}

 グラフのタイトル

グラフのタイトルを追加した。

options: {
  title: {
    display: true,
    text: 'Multi Line Chart'
  },
}

 グラフ軸の改善

Y軸に関しては、

  1. グラフの原点を0にしたかったので、scales.yAxes.ticks.min を設定
  2. scales.yAxes.scaleLabel.labelString を設定して、軸のタイトルを追加 (display を true にする必要あり)

X軸に関しては上記の2だけを使用している。

options: {
  scales: {
    yAxes: [
      {
        ticks: {
          min: 0
        },
        scaleLabel: {
          display: true,
          labelString: "Values"
        }
      }
    ],
    xAxes: [
      {
        scaleLabel: {
          display: true,
          labelString: "Date"
        }
      }
    ]
  }
}

palette.js

綺麗な配色を実現しつつ、色盲の方などを考慮した配色にするために Google が提供している JS を利用した。

https://github.com/google/palette.js

  var pal = palette('cb-BuGn', 8 );

こんな感じでカラーパレットを rgb 表記の配列として返してくれる。 この配列から適当な色を選択する。 詳しくは前述の git に入っている demo.js を参考にしてください。

 全体

ChartJs Line Multi

おまけ option の構造

line option structure