chart.js - 当值相等时，Chartjs 条形图不会呈现

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
            }
        }]
    }
}

结果: