chart.jsのあれこれ プロパティ編
実務で使ってるchart.jsのメモとして残してます。
一応、こちらの続きです。
yan-nade.hatenablog.com 今回どんなデータを表すかというと、日次 週次 月次 で健康ポイントの変動をライングラフで表せるようにしています。 多次元配列としています。
//横サイズ
var xAxisLabelMinWidth = 200;
var width = myData[0].length*xAxisLabelMinWidth;
document.getElementById('myLineChart').style.width = width + "px";
var selectedIndex = 0;
var ctx = document.getElementById("myLineChart");
var myLineChart = new Chart(ctx, {
type: 'line',
data:
{
labels: myData[selectedIndex][0].labels,
datasets: [{
//凡例
label: myData[selectedIndex][0].label,
//数値
data: myData[selectedIndex][0].data,
borderColor: myData[selectedIndex][0].borderColor,
backgroundColor: myData[selectedIndex][0].backgroundColor,
pointBackgroundColor: myData[selectedIndex][0].pointBackgroundColor,
//グラフの曲線を調整
lineTension: myData[selectedIndex][0].lineTension,
borderWidth: 1,
},
{
label: myData[selectedIndex][1].label,
data: myData[selectedIndex][1].data,
borderColor: myData[selectedIndex][1].borderColor,
backgroundColor: myData[selectedIndex][1].backgroundColor,
pointBackgroundColor: myData[selectedIndex][1].pointBackgroundColor,
lineTension: myData[selectedIndex][1].lineTension,
borderWidth: 1,
},
{
label: myData[selectedIndex][2].label,
data: myData[selectedIndex][2].data,
borderColor: myData[selectedIndex][2].borderColor,
backgroundColor: myData[selectedIndex][2].backgroundColor,
pointBackgroundColor: myData[selectedIndex][2].pointBackgroundColor,
lineTension: myData[selectedIndex][2].lineTension,
borderWidth: 1,
},
{
label: myData[selectedIndex][3].label,
data: myData[selectedIndex][3].data,
borderColor: myData[selectedIndex][3].borderColor,
backgroundColor: myData[selectedIndex][3].backgroundColor,
pointBackgroundColor: myData[selectedIndex][3].pointBackgroundColor,
lineTension: myData[selectedIndex][3].lineTension,
borderWidth: 1,
}],
},
options:
{
responsive: false,
tooltips:
{
enabled: false,
position: 'nearest',
intersect: false,
custom: customTooltips,
},
title:
{
display: false,
},
legend:
{
position: 'bottom',
labels:
{
generateLabels: function(chart)
{
//ここで凡例の左詰めの操作してます
chart.legend.afterFit = function ()
{
var width = this.width;
this.lineWidths = this.lineWidths.map(() => this.width - 10);
this.options.labels.padding = 10;
this.options.labels.boxWidth = 55;
};
//mapで返してます。
return chart.data.datasets.map(function(dataset, i)
{
return{
text: dataset.label,
fillStyle: dataset.backgroundColor,
hidden: dataset.hidden,
lineCap: dataset.borderCapStyle,
lineDash: dataset.borderDash,
lineDashOffset: dataset.borderDashOffset,
lineJoin: dataset.borderJoinStyle,
lineWidth: dataset.borderWidth,
strokeStyle: dataset.borderColor,
lineWidth: dataset.borderWidth,
strokeStyle: dataset.borderColor,
pointStyle: dataset.pointStyle,
//ここの記述が大事、ある記事でindexだけとかあるけどdatasetIndexにしないと他がうまく動いてくれなかったりする。
datasetIndex: i
};
});
}
}
},
scales:
{
yAxes:
[{
ticks:
{
suggestedMax: 100,
suggestedMin: 0,
stepSize: 10,
callback: function(value, index, values)
{
return value;
}
}
}]
},
}
});
//ここでグラフの切り替えです。公式にもありますがupdateで再描画します。
document.getElementById("button-day")
.addEventListener('click',
function()
{
selectedIndex = 0;
myLineChart.data.labels = myData[selectedIndex][0].labels;
myLineChart.data.datasets[0].data = myData[selectedIndex][0].data;
myLineChart.data.datasets[1].data = myData[selectedIndex][1].data;
myLineChart.data.datasets[2].data = myData[selectedIndex][2].data;
myLineChart.data.datasets[3].data = myData[selectedIndex][3].data;
myLineChart.update();
}
);
document.getElementById("button-month")
.addEventListener('click',
function()
{
selectedIndex =1;
myLineChart.data.labels = myData[selectedIndex][0].labels;
myLineChart.data.datasets[0].data = myData[selectedIndex][0].data;
myLineChart.data.datasets[1].data = myData[selectedIndex][1].data;
myLineChart.data.datasets[2].data = myData[selectedIndex][2].data;
myLineChart.data.datasets[3].data = myData[selectedIndex][3].data;
myLineChart.update();
}
);
document.getElementById("button-year")
.addEventListener('click',
function()
{
selectedIndex = 2;
myLineChart.data.labels = myData[selectedIndex][0].labels;
myLineChart.data.datasets[0].data = myData[selectedIndex][0].data;
myLineChart.data.datasets[1].data = myData[selectedIndex][1].data;
myLineChart.data.datasets[2].data = myData[selectedIndex][2].data;
myLineChart.data.datasets[3].data = myData[selectedIndex][3].data;
myLineChart.update();
}
);
};
実際のデータはここに書けませんが、 これで グラフ表示 tooltipsから編集や削除へ遷移 切替と色々出来るようになりました。 深いところは日本語の記事がないので、そこはやっぱりもう外国語記事をあさるしかないですね。 値がどうなっているかは chart.data.datasetsのプロパティをデバックしてって見ていました。 けど今後はhighchartで実装していくようになると思うのでしばらくはchart.jsは触らなさそう
