Chart JS V2.0 Line Chart Multi
サンプルの内容
2組のデータを同一Chart内に表示している。 また、Chart のタイトルとX,Y軸のタイトルを追加した。
Base からの主な修正点
Global settings
- グラフのラインとx軸の間は色を塗らない
- グラフのラインを直線にする。
- アニメーションを無効化
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軸に関しては、
- グラフの原点を0にしたかったので、scales.yAxes.ticks.min を設定
- 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 を参考にしてください。