如何控制在Chart.js中插入更多的条目时，Y轴的值会被覆盖？

Question

我是一个PHP新手，正在做一个项目，我需要在一个条形图中显示基于状态的票数。它一直工作得很好，但是，当一天内插入更多的数值时，y轴的数值会互相覆盖。以下是我使用的条形图代码，并使用chart js。

PHP代码

<div class="panel-body" id="chart_dist_tokens">
    <div class=" col-md-12">
        <div id="ticketsGraph" style="width:auto; height:275px;">
            <canvas id="barGraphForTickets"></canvas>
        </div>
    </div>
</div>

JS代码

var chartdata = {
   datasets: datasetValues,
   labels: formatDates
};

var myPieChart = new Chart(graphTarget,{
    type: 'bar',
    data: chartdata,
    options:{
        maintainAspectRatio:false,
        responsive:true,
        scales: {
           yAxes: [{
              ticks: {
                  stepSize: 1
              }
           }]
        }
    }
});

以下是我得到的图形图像。

有什么办法可以用javascript解决这个问题，或者是与滥用图表代码有关？

Answer 1

默认情况下，Chart.js会自动计算可以显示多少个标签，并相应地隐藏标签。这是由 ticks.autoSkip 默认值 true.

如果你明确定义了 yAxes.ticks.stepSize 然而， autoSkip 被忽略，所有匹配的步骤都会显示一个"√"。

解决方案1

最简单的解决方案是删除 yAxis.ticks 从选项中，让 autoSkip 管理蜱虫的产生。

解决方案2

您也可以增加 stepSize 并选择适合自己的。

yAxes: [{
  ticks: {
    stepSize: 10
  }
}]

解决方案三

另一个选择是使用以下方法来定义要显示的确切的滴答数。yAxes.ticks.maxTicksLimit.

yAxes: [{
  ticks: {
    maxTicksLimit: 5
  }
}]