Chart JS V2.0 Line Chart Point Style
サンプルの内容
線の種類を変更して、点のスタイルを変更している。 また、凡例も点のスタイと一致させている。
Base からの主な修正点
変更点は
- 線種の変更
- 点の変更
- 凡例の変更
の3点となる。
線種の変更
data.datasets.borderDash に配列で数値を渡すことで、任意の破線となる。 破線の説明はMDNを参照してください。
data: { datasets: [ { borderDash: [ 5, 10], } ] },
点の変更
data.datasets.pointStyle に文字列を設定することで変更が可能となる。 標準で選択できる点の種類は,
- circle
- triangle
- rect
- rectRot
- cross
- crossRot
- star
- line
- dash
ですが、Javascript の drawImage を使って表示することもできるようですが試していません。 また、各値は配列でも渡すことができます。
data: { datasets: [ { pointStyle: 'star' } ] },
凡例の変更
凡例はデフォルトで長方形ですが、options.legend.labels.usePointStyle を true にすることで点と一致する図形になります。 ただし、options.legend.labels.fontSize で凡例図形のサイズが決まるので適切に処理する必要があります。 また、options.legend.labels.boxSize も合わせることで表示が良くなります。
options: { legend: { labels: { fontSize: 20, boxWidth: 20, usePointStyle: true, } },
おまけ
レスポンシブデザインにするため、options.responsive を true にしています。