Chart.jsによる折線グラフ作成<Chart.js<Javascript<木暮仁

スタートページJavascriptChart.js

Chart.jsによる折線グラフ作成


グラフの形式設定

折線グラフの最も基本的な設定は、
  ・グラフの線を直線にするか曲線にするか tension
  ・グラフとX軸の間を塗るか塗らないか  fill
のグラフの形態の設定です。
右図(形式3グラフ)のソースリストを掲げます。★印を修正することにより、形式1グラフ、形式2グラフになります。

体裁の改良

上の形式1グラフを対象に次の変更をします(「XY軸スケール」で詳述します)。

これらは、個々の系列に限定しない全体に関することなので、 options で指定します。

        options: {
               :
            scales: {
                yAxes: [
                    {
                        ticks: {           // Y軸目盛り        
                            min: 0,            // 最小値
                            max: 25,           // 最大値
                            stepSize: 5,       // 間隔
                            fontColor: "blue"  // 色
                        },
                        gridLines: {        // 水平補助線の定義
                            color: "rgba(0, 0, 255, 0.2)"
                        },
                        scaleLabel: {       // Y軸のラベル
                            display: true,
                            fontSize: 16,
                            fontColor: "blue",
                            labelString: "系列A"
                        }
                    }
                ],
                xAxes: [
                    {
                        gridLines: {        // 垂直補助線の定義
                            display: false     // 消す
                        }
                    }
                ],
            }
        }

グラフの線と点

グラフの線と点

グラフの線と点の設定項目の主なものを示します。これらはは系列ごとの設定ですので、datasets の各系列で指定します。
名称意味省略時備考
showLine線の有無truefalseとすると点だけになる
borderColor線の色'rgba(0,0,0,0.1)'
borderWidth線の太さ1
borderDash点線実線点線 [線長, 空白]の形式 例[10, 3]
pointRadius点の半径30とすると点がなくなる
pointStyle点の形状'circle'→点の形状
pointBackgroundColor点の塗りつぶし色'rgba(0,0,0,0.1)'
pointBorderColor点境界線の色'rgba(0,0,0,0.1)'
pointBorderWidth点境界線の幅1
点の形状: circle, triangle, rect, rectRot, cross, crossRot, star, line, dash

            datasets: [
                {
                    label: "系列A",
                        :
                    pointStyle: "circle",            // 点のスタイル 円
                    pointRadius: 6,                  // 点の半径
                    backgroundColor: "yellow"        // 点の塗りつぶし色
                },
                {
                    label: "系列B",
                        :
                    borderDash: [10, 3],             // 点線 [線長, 空白]
                    pointStyle: "triangle",          // 点のスタイル 三角
                    pointRadius: 6
                },
                {
                    label: "系列C",
                        :
                    showLine: false,                 // 線なし tension, fill などは不要
                    borderColor: "black",            // 点の枠色
                    borderWidth: 2,                  // 枠線の太さ
                    pointStyle: "rect",              // 点のスタイル 四角
                    pointRadius: 10,
                    pointBackgroundColor: "lime"     // 点の塗りつぶし色
                }
            ]

凡例の点表示

通常は、凡例の図形は矩形になっていますが、点の図形を用いたいことがあります。それには、legend.labelsで設定します。
点の内部色が反映されていないこと、線の点線などが点枠線になっていることなどがありますが、私は解決方法を知りません。


    legend: {              // 凡例の表示位置
        :
        labels: {              // 凡例の表示内容
            fontSize: 12,           // 文字のサイズ
            boxWidth: 12,           // 点のサイズ
            usePointStyle: true     // 凡例図形を点にする
        }