Chart.jsのポイントについて
Chart.jsはグラフチャートに関するJavascriptのライブラリです。
以下のように、グラフの各地点でpoint
と呼ばれる節を表示できます。
このようなグラフは以下のようなコードになっています。
const ctx = document.getElementById('myChart');
new Chart(ctx, {
type: 'line',
data: {
labels: Utils.months({count: DATA_COUNT}),
datasets: [
{
label: 'Dataset 1',
data: Utils.numbers(NUMBER_CFG),
fill: false,
borderColor: Utils.CHART_COLORS.red,
backgroundColor: Utils.transparentize(Utils.CHART_COLORS.red, 0.5),
borderWidth: 1,
// ポイントに関する設定
pointStyle: 'rectRot',
pointRadius: 5,
pointBorderColor: 'rgb(0, 0, 0)'
},
]
};,
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
ここでpointRadius
を0以上の任意の数字
を設定することで、0以上の任意の数字
の半径のポイントが各地点で表示されます。 任意の数字を大きくすればポイントの丸や四角は大きくなります。
グラフの一番最後の地点だけポイントを表示する方法
グラフの一番最後の地点だけポイントを表示するには、pointRadius
に配列を渡してあげることで実現します。
例えば、X軸の日付の配列が['月', '火', '水', '木', '金']
だとすると、pointRadius
に渡す配列は[0, 0, 0, 0, 5]
としてあげることで、最後の金曜日の地点だけがポイントとして表示されます。
X軸の日付の配列の要素の数がn個ある場合、以下のような配列を作ってあげれば、X軸の地点の数がいくつであっても最後の点だけがポイントとして表示されることになります。
const dateArray = ['1/1', '1/2', '1/3', ...];
const pointRadiusArray = Array(date.Array.length - 1).fill(0);
pointRadiusArray.push(5);
=> pointRadiusArray === [0, 0, 0, ..., 5]
今回は最後の地点だけを扱いましたが、実際は好きな地点にポイントを表示することが出来ます!
その場合はそのパターンに即した配列を生成するコードを書くことになりますが、完成した配列を変数に入れてpointRadius
に設定してあげればいい点は共通しています!
もし間違っている点や、よりスマートな方法がある場合はコメントで教えていただけると大変嬉しいです!