スタートページ＞ Javascript＞ Chart.js

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

グラフの形式設定

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

体裁の改良

上の形式１グラフを対象に次の変更をします（「ＸＹ軸スケール」で詳述します）。

• Ｙ軸のスケールを、０～２５として、５きざみで目盛りを引きます。
• Ｙ軸の目盛りや補助線（水平の線）の色を青にします。
• Ｙ軸のラベル「系列Ａ」を表示します。
• Ｘ軸の補助線（垂直の線）を消します。

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

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

グラフの線と点

グラフの線と点

グラフの線と点の設定項目の主なものを示します。これらはは系列ごとの設定ですので、datasets の各系列で指定します。

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

凡例の点表示

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

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