ここで教えて頂きました。
< コード例 >
チャートは4個を同時に表示
chart.jsの描画はクラスで行ってます。
4個のチャートオブジェクトは、staticな配列に入れてます。
static charts = [null, null, null, null]
// 前回消去 //
if (typeof PieChart.charts[this.idx] !== 'undefined' && PieChart.charts[this.idx] !== null && PieChart.charts[this.idx]) {
PieChart.charts[this.idx].destroy();
}
// == ドーナツチャート描画 == //
PieChart.charts[this.idx] = new Chart(context, {
//type: 'doughnut',
//type: 'pie',
type: chartType,
data: {
labels: labels,
datasets: [{
label: name,
backgroundColor: ["#fa8072", "#00ff7f", "#00bfff", "#a9a9a9", "#f5f5f5", "#a7d4d4", "#E5E100"],
data: counts
}]
},
// プラグインをセット //
plugins: [
ChartDataLabels
],
//color: "#ffffff",
options: {
responsive: false,
maintainAspectRatio: false, // 2回目以降大きくなってしまうのを防止用
legend: {
labels: {
// グローバルプロパティを上書 ?????? no affect //
fontColor: 'white'
}
},
// データラベルがアフェクトする用 //
/*toltip: {
enabled: false
},*/
plugins: {
// データラベルがアフェクトする用 //
toltip: {
enabled: false
},
title: {
display: true,
text: name
},
// == データラベルプラグインの設定 == //
datalabels: {
color: '#294829',
font: {
weight: 'bold',
size: 10, // <=== 小さ目
},
formatter: (value, ctx) => {
let label = ctx.chart.data.labels[ctx.dataIndex];
//return label + '\n' + value + '%';
return label
}
}
// == データラベルプラグインの設定終わり == //
}
}
})