読者です 読者をやめる 読者になる 読者になる

Chart JS V2.0 Line Chart Point Style

chartjs

サンプルの内容

線の種類を変更して、点のスタイルを変更している。 また、凡例も点のスタイと一致させている。

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

Base からの主な修正点

変更点は

  1. 線種の変更
  2. 点の変更
  3. 凡例の変更

の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 にしています。

全体

chartjs sample pointstyle