在我的脚本中，我使用一个函数来创建图表的配置。当我使用该函数创建第一个图表时，一切正常。但是当我第二次使用不同的数据时，图表没有出现。谁能解释为什么它不起作用并且可能更新我的代码使其起作用？希望你理解我的问题编码如下：<!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>
1 回答
一只萌萌小番薯
TA贡献1795条经验 获得超7个赞
问题出在数据标签格式化程序中，其中 _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>
添加回答
举报
0/150
提交
取消