【Chart.js】折れ線グラフの各種設定

この記事では、Javascriptライブラリ「Chart.js」で折れ線グラフをカスタマイズする方法をソースコード付きでまとめました。

折れ線グラフのカスタマイズ

Chart.jsは短いコードでグラフを描けるライブラリです。
折れ線を描くには、Chartクラスを使います。
typeに’line’を指定することで折れ線をプロットできます。
今回は、折れ線をカスタマイズする方法をまとめました。

ソースコード

サンプルプログラムのソースコードです。
【Javascript】

パラメータ 内容
fill 面を表示するかどうか(デフォルト:true、消す場合はfalseを指定)
label 凡例
fill 面の表示
ineTension 線のカーブ
backgroundColor 背景色
borderColo 枠線の色
pointBorderColor 点の枠線の色
pointBackgroundColor 点の背景色
pointRadius 点のサイズ
pointHoverRadius 点のサイズ(マウスオーバー時)
pointHoverBackgroundColor 点の背景色(マウスオーバー時)
pointHoverBorderColor 点の枠線の色(マウスオーバー時)
pointHitRadius マウスオーバーしたと判定する点の外側の範囲(px)

【HTML】

実行結果

サンプルプログラムの実行結果です。
サンプルデモページ

【関連記事】
Chart.js入門 グラフ・チャート作成
Javascript入門

シェア&フォローお願いします!