数据未完全显示在条形图上
数据未完全显示在条形图上
提问于 2021-02-20 01:55:33
由于某些原因，我的条形图上的数据无法显示。
我正在使用charts.js
html代码是：
<div class="chart-wrapper">
<canvas id="myChart2"></canvas>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>下面是JavaScript：
<script>
let ctx = document.getElementById('myChart2').getContext('2d');
let colorHex = ['#870000', '#000f61', '#004f03'];
var barChartData = {
labels: ['Specialist1', 'Specialist2', 'Specialist3'],
datasets: [{
label: 'Dataset 1',
borderColor: '#FF0000',
borderWidth: 2,
data: [10, 12, 7]
},{
label: 'Dataset 2',
borderColor: '#00FF00',
borderWidth: 2,
data: [9, 8, 5]
}]
};
let myChart2 = new Chart(ctx, {
type: 'bar',
data: barChartData,
options: {
responsive: true,
legend: {
position: 'bottom'
},
title: {
display: true,
text: 'Cases Referred vs Cases Solved'
}
}
})
</script>
你知道为什么专家3的第二个数据集没有加载吗？另外，为什么这些值是随机分布的？
Stack Overflow用户
回答已采纳
发布于 2021-02-20 02:12:12
这是因为y轴从5开始。
let ctx = document.getElementById('myChart2').getContext('2d');
let colorHex = ['#870000', '#000f61', '#004f03'];
var barChartData = {
labels: ['Specialist1', 'Specialist2', 'Specialist3'],
datasets: [{
label: 'Dataset 1',
borderColor: '#FF0000',
borderWidth: 2,
data: [10, 12, 7]
}, {
label: 'Dataset 2',
borderColor: '#00FF00',
borderWidth: 2,
data: [9, 8, 5]
}]
};
let myChart2 = new Chart(ctx, {
type: 'bar',
data: barChartData,
options: {
responsive: true,
legend: {
position: 'bottom'
},
title: {
display: true,
text: 'Cases Referred vs Cases Solved'
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
})<div class="chart-wrapper">
<canvas id="myChart2"></canvas>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66282678
复制相关文章
相似问题
腾讯云开发者
