我用chart.js在同一个页面上创建了两个饼图,但是其中一个不能显示图形。修改javascript仍然不能显示它。我不知道发生了什么。
<div>
<div style="width: 300px;">
<canvas id="piechart1"></canvas>
</div>
</div>
<script>
// setup
const data1 = {
labels: ['connect', 'disconnect'],
datasets: [{
label: 'Weekly Sales',
data: [40,60],
backgroundColor: [
'rgba(255, 26, 104, 0.2)',
'rgba(54, 162, 235, 0.2)'
],
borderColor: [
'rgba(255, 26, 104, 1)',
'rgba(54, 162, 235, 1)'
],
borderWidth: 1
}]
};
// config
const config1 = {
type: 'pie',
data1,
options: {
plugins:{
labels:{
render: 'percentage',
// position:'outside'
},
title: {
display: true,
text: 'Electromechanical',
padding: {
top: 10,
},
font: {
size: 18
}
}
}
},
};
// render init block
const piechart1 = new Chart(
document.getElementById('piechart1'),
config1
);
</script>
<div>
<div style="width: 300px;">
<canvas id="myChart"></canvas>
</div>
</div>
<script>
// setup
const data = {
labels: ['connect', 'disconnect'],
datasets: [{
label: 'Weekly Sales',
data: [98,2],
backgroundColor: [
'rgba(255, 26, 104, 0.2)',
'rgba(54, 162, 235, 0.2)'
],
borderColor: [
'rgba(255, 26, 104, 1)',
'rgba(54, 162, 235, 1)'
],
borderWidth: 1
}]
};
// config
const config = {
type: 'pie',
data,
options: {
plugins:{
labels:{
render: 'percentage',
// position:'outside'
},
title: {
display: true,
text: 'Traffic',
padding: {
top: 10,
},
font: {
size: 18
}
}
}
},
};
// render init block
const myChart = new Chart(
document.getElementById('myChart'),
config
);
</script>
一开始以为是参数重复导致参数无法显示,修改后只显示标题,图形仍然无法显示。
1条答案
按热度按时间0md85ypi1#
问题在于如何配置第一个图表。
当您设置“data”配置时,您使用的是变量名“data1”,而不是CHART.js要求的“data”。
请使用以下选项: