我正在使用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等)

其他回答


>最佳解决方案


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

由于上面的建议对我的charts.js 2.1.4没有任何帮助,我通过将值0添加到我的数据集数组(但没有额外的标签)来解决它:

statsData.push(0);

[...]

var myChart = new Chart(ctx, {
    type: 'horizontalBar',
    data: {
        datasets: [{
            data: statsData,
[...]

var config = { type: 'line', data: { labels: ["January", "February", "March", "April", "May", "June", "July"], datasets: [{ label: "My First dataset", data: [10, 80, 56, 60, 6, 45, 15], fill: false, backgroundColor: "#eebcde ", borderColor: "#eebcde", borderCapStyle: 'butt', borderDash: [5, 5], }] }, options: { responsive: true, legend: { position: 'bottom', }, hover: { mode: 'label' }, scales: { xAxes: [{ display: true, scaleLabel: { display: true, labelString: 'Month' } }], yAxes: [{ display: true, ticks: { beginAtZero: true, steps: 10, stepValue: 5, max: 100 } }] }, title: { display: true, text: 'Chart.js Line Chart - Legend' } } }; var ctx = document.getElementById("canvas").getContext("2d"); new Chart(ctx, config); <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.bundle.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <canvas id="canvas"></canvas> </body>

你必须覆盖比例,试试这个:(适用于ChartJS v1.x)

window.onload = function(){
    var ctx = document.getElementById("canvas").getContext("2d");
    window.myLine = new Chart(ctx).Line(lineChartData, {
        scaleOverride : true,
        scaleSteps : 10,
        scaleStepWidth : 50,
        scaleStartValue : 0 
    });
}

对于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