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

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


当前回答

对于"chart.js": "^3.6.1",

options: {          
    scales: {
        y: {
            min: 0,
            max: 100,
        }
    }
}

其他回答

对于chart.js V2 (beta),使用:

var options = {
    scales: {
        yAxes: [{
            display: true,
            ticks: {
                suggestedMin: 0,    // minimum will be 0, unless there is a lower value.
                // OR //
                beginAtZero: true   // minimum value will be 0.
            }
        }]
    }
};

有关线轴配置的详细信息,请参阅chart.js文档。

上面的答案对我不起作用。可能从11年起,选项名称就发生了变化,但以下内容对我来说是有用的:

ChartJsProvider.setOptions
  scaleBeginAtZero: true

我写了一个js在y轴上显示从0到100的值,间隔为20。

这是我的script。js

//x-axis var vehicles = ["Trucks", "Cars", "Bikes", "Jeeps"]; //The percentage of vehicles of each type var percentage = [41, 76, 29, 50]; var ctx = document.getElementById("barChart"); var lineChart = new Chart(ctx, { type: 'bar', data: { labels: vehicles, datasets: [{ data: percentage, label: "Percentage of vehicles", backgroundColor: "#3e95cd", fill: false }] }, options: { scales: { yAxes: [{ ticks: { beginAtZero: true, min: 0, max: 100, stepSize: 20, } }] } } });

这是显示在网页上的图表。


>最佳解决方案


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

编辑:

他们做了一些改变。目前,这是可行的

       scales: {
            x: {
                ...,
                max: value,
                min: value
            },
            y: {
                ...same as x
            }
        }

这里是最新变化的链接 最小最大图表js


旧的回答:

截至2022年2月,这是有效的。以下是一个人可以改变它的方法

var options = {
    scales: {
        yAxes: [{
            display: true,
            stacked: true,
            ticks: {
                min: 0, // minimum value
                max: 10 // maximum value
            }
        }]
    }
};