Question

我陷入了Chartjs的一个愚蠢问题，我只是尝试创建类似“ hello world”条形图的东西，但Chartjs 2.7.2版本如果相等则不会呈现值：

   var popCanvas1 =  document.getElementById("chart1").getContext("2d");
   var barChart = new Chart(popCanvas1, {
       type: 'bar',
       data: {
           labels: [ "0-10", "11-20", "21-30", "31-40", "41-50", "51-60", "61-70", "71-80", "81-90", "91-100" ],
           datasets: [{
               label: 'test',
               data: [16, 21, 15, 28, 39, 38, 34, 34, 22, 15],
               backgroundColor: [
                   'rgba(255, 99, 132, 0.6)',
                   'rgba(54, 162, 235, 0.6)',
                   'rgba(255, 206, 86, 0.6)',
                   'rgba(75, 192, 192, 0.6)',
                   'rgba(153, 102, 255, 0.6)',
                   'rgba(255, 159, 64, 0.6)',
                   'rgba(255, 99, 132, 0.6)',
                   'rgba(54, 162, 235, 0.6)',
                   'rgba(255, 206, 86, 0.6)',
                   'rgba(75, 192, 192, 0.6)'
               ]
           }]
       },
       options: {
           title: {
               display: true,
               text: 'Title Text'
           }
       }
   });

在渲染的图像中，我没有等于15的数据值的限制，有人可以帮忙吗？

Answer 1

15是数据集中的最小数字。根据Chart.js确定y轴线性比例的方式，它可能从15开始。这意味着不会绘制任何条形图，因为该值等于y轴的最低点，即：

您可以通过将beginAtZero属性添加到图表options中来解决此问题：

options: {
    title: {
        display: true,
        text: 'Title Text'
    },
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero: true
            }
        }]
    }
}

结果：

值相等时，Chartjs条形图不呈现

1 个答案: