問題出在數據標簽格式化程序中，其中 _meta 索引并不總是 0。如果您使用多個圖表，第二個圖表索引為 1，第三個圖表索引為 2 等。我添加了這行代碼以使用 Object.keys() 獲取當前的 metaIndex
let metaIndex = Object.keys(ctx.dataset._meta)[0]
let sum = ctx.dataset._meta[metaIndex].total;
這是工作代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>
<script src="./js/script.js"></script>
</head>
<body>
<div style="width: 100%; display: table;">
<div style="display: table-row; height: 300px;">
<div style="width:25%; display: table-cell;">
<canvas id="canvas"></canvas>
</div>
<div style="width:25%; display: table-cell;">
<canvas id="canvas1"></canvas>
</div>
<div style="width:25%; display: table-cell;">
<canvas id="canvas2"></canvas>
</div>
<div style="width:25%; display: table-cell;">
<canvas id="canvas3"></canvas>
</div>
</div>
</div>
<script>
function chartconfig(data, label, labels) {
Chart.defaults.global.defaultFontFamily = 'Lato';
Chart.defaults.global.defaultFontSize = 12;
config = {
type: 'doughnut',
data: {
datasets: [{
data,
backgroundColor: ['rgb(0, 140, 75)', 'rgb(94, 140, 0)'],
label,
labels,
hoverBorderWidth: 3,
fill: false,
},],
},
options: {
plugins: {
datalabels: {
color: '#000',
align: 'start',
anchor: 'end',
display: 'auto',
formatter: (value, ctx) => {
let chartIndex = Object.keys(ctx.dataset._meta)[0]
let sum = ctx.dataset._meta[chartIndex].total;
let percentage = (value * 100 / sum).toFixed(2) + "%";
let text = value + '\n' + percentage;
return text;
},
}
},
rotation: -0.8 * Math.PI,
legend: {
position: 'bottom',
labels: {
fontColor: '#000',
generateLabels: () => {
let labels = [];
config.data.datasets.forEach((ds, iDs) => labels = labels.concat(ds.labels.map((l, iLabel) => ({
datasetIndex: iDs,
labelIndex: iLabel,
text: l,
fillStyle: ds.backgroundColor[iLabel],
hidden: chart ? chart.getDatasetMeta(iDs).data[iLabel].hidden : false,
strokeStyle: '#fff'
}))));
return labels;
}
},
onClick: (event, legendItem) => {
let metaData = chart.getDatasetMeta(legendItem.datasetIndex).data;
metaData[legendItem.labelIndex].hidden = !metaData[legendItem.labelIndex].hidden;
chart.update();
}
},
tooltips: {
callbacks: {
label: (tooltipItem, data) => {
let dataset = data.datasets[tooltipItem.datasetIndex];
let index = tooltipItem.index;
return dataset.labels[index] + ": " + dataset.data[index];
}
}
}
}
};
return config;
}
function addData(data, backgroundColor, labels) {
chart.data.datasets.push({
data,
backgroundColor,
labels,
fill: false,
});
chart.update();
}
var data = [160, 150,];
var label = ['Februar'];
var labels = ['21.02.2020', '22.02.2020'];
var config = chartconfig(data, label, labels);
var ctx1 = document.getElementById("canvas").getContext("2d");
var chart = new Chart(ctx1, config); // worked fine and appears
var data = [120, 230,];
var label = ['M?rz'];
var labels = ['21.03.2020', '22.03.2020'];
var config = chartconfig(data, label, labels);
var ctx2 = document.getElementById("canvas1").getContext("2d");
var chart = new Chart(ctx2, config); //didnt appear
</script>
</body>
</html>
