我正在使用http://www.chartjs.org/上的折线图

正如你可以看到Y轴的最大值(130)和最小值(60)是自动选择的,我想要最大值= 500和最小值=0。这可能吗?


当前回答

关于这个问题,有很多相互矛盾的答案,其中大多数对我没有任何影响。

我终于能够用chart.options.scales.xAxes[0].ticks设置(或检索当前)x轴最小和最大显示值。最小值(即使最小值和最大值只是分配给图表的数据的子集)。

在我的例子中使用时间刻度,我使用:

chart.options.scales.xAxes[0].ticks.min = 1590969600000;  //Jun 1, 2020
chart.options.scales.xAxes[0].ticks.max = 1593561600000;  //Jul 1, 2020
chart.update();

(我发现不需要设置步长值或beginAtZero等)

其他回答

在我的例子中,我在yaxis ticks中使用了一个回调, 我的值是百分比,当它达到100%时,它不显示点,我使用这个:

      yAxes: [{
                   ticks: {
                       beginAtZero: true,
                       steps: 10,
                       stepValue: 5,
                       min: 0,
                       max: 100.1,
                       callback: function(value, index, values) {
                           if (value !== 100.1) {
                               return values[index]
                           }
                       }
                   }
               }],

而且效果很好。

只需在选项中设置scaleStartValue的值。

var options = {
   // ....
   scaleStartValue: 0,
}

请在这里查看相关文档。


>最佳解决方案


  "options":{
                    scales: {
                                yAxes: [{
                                    display: true,
                                    ticks: {
                                        suggestedMin: 0, //min
                                        suggestedMax: 100 //max 
                                    }
                                }]
                            }
                    }

对于Chart.js v3.2.0,这样做:

let options = {
    scales: {
        y: {
            suggestedMin: 0,
            suggestedMax: 69
        },
        x: {
            suggestedMin: 0,
            suggestedMax: 420
        }
    }
}

文档:https://www.chartjs.org/docs/latest/axes/ axis-range-settings

window.onload = function(){
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx ,{
          type: 'line',
          data: yourData,
          options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero:true,
                        min: 0,
                        max: 500    
                    }
                  }]
               }
            }
});

我在v2中配置了“选项”。

你应该阅读文档: http://www.chartjs.org/docs/#scales-linear-scale