Chart.js 如何设置Y轴的最大值和最小值

我使用的是来自的折线图

---

正如您可以看到Y轴的最大值（130）和最小值（60）是自动选择的，我希望最大值=500，最小值=0。这可能吗？

您必须超越比例，请尝试以下操作：

（适用于ChartJS v1.x）

---

只需在选项中设置scaleStartValue的值

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

---

请参阅相关文档。

上述答案对我不适用。可能自'11'以来选项名称发生了更改，但以下内容对我起到了作用：

ChartJsProvider.setOptions
  scaleBeginAtZero: true

对于chart.js V2（beta版），请使用：

---

有关更多详细信息，请参见。

对于1.1.1，我使用以下方法将刻度固定在0.0和1.0之间：

yAxes: [{
    display: true,
    ticks: {
        beginAtZero: true,
        steps:10,
        stepValue:5,
        max:100
    }
}]

var options = {
    scaleOverride: true,
    scaleStartValue: 0,
    scaleSteps: 10,
    scaleStepWidth: 0.1
}

---

这适用于Charts.js 2.0：

其中一些不起作用的原因是，您应该在创建图表时声明选项，如下所示：

$(function () {
    var ctxLine = document.getElementById("myLineChart");
    var myLineChart = new Chart(ctxLine, {
        type: 'line',
        data: dataLine,
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        min: 0,
                        beginAtZero: true
                    }
                }]
            }
        }

    });
})

相关文件如下：

var配置={
键入：“行”，
数据：{
标签：[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”]，
数据集：[{
标签：“我的第一个数据集”，
数据：[10,80,56,60,6,45,15]，
填充：假，
背景颜色：“eebcde”，
边框颜色：“#eebcde”，
borderCapStyle:“butt”，
borderDash:[5,5]，
}]
},
选项：{
回答：是的，
图例：{
位置：'底部'，
},
悬停：{
模式：“标签”
},
比例：{
xAxes：[{
显示：对，
scaleLabel：{
显示：对，
标签串：“月”
}
}],
雅克斯：[{
显示：对，
滴答声：{
贝吉纳泽罗：是的，
步骤：10，
步长值：5，
最高：100
}
}]
},
标题：{
显示：对，
文本：“Chart.js折线图-图例”
}
}
};
var ctx=document.getElementById（“画布”）.getContext（“2d”）；
新图表（ctx，配置）
由于上面的建议对charts.js 2.1.4没有任何帮助，我通过将值0添加到数据集数组（但没有额外的标签）来解决这个问题：

我在v2中配置了“选项”

您应该阅读以下文档：
2016年写这篇文章，而图表js 2.3.0是最新版本。以下是如何改变它

var选项={
比例：{
雅克斯：[{
显示：对，
对,，
滴答声：{
最小值：0，//最小值
最大值：10//最大值
}
}]
}
};
ChartJS v2.4.0

如2017年2月7日的示例所示（因为这似乎会经常发生变化）：

这将产生5个y轴值，如下所示：

100
80
60
40
20
0

在我的例子中，我在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]
                           }
                       }
                   }
               }],

它工作得很好。
我写了一个js来显示y轴上0到100之间的值，间距为20

这是我的script.js


//x轴
var车辆=[“卡车”、“汽车”、“自行车”、“吉普车”]；
//每种类型车辆的百分比
风险值百分比=[41,76,29,50]；
var ctx=document.getElementById（“条形图”）；
var线形图=新图表（ctx{
类型：'bar'，
数据：{
标签:车辆,，
数据集：[{
数据：百分比，
标签：“车辆百分比”，
背景色：“3e95cd”，
填充：假
}]
},
选项：{
比例：{
雅克斯：[{
滴答声：{
贝吉纳泽罗：是的，
分:0,，
最高：100，
步长：20，
}
}]
}
}
});

>最佳解决方案


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

我终于能够使用
chart.options.scales.xAxes[0].ticks.min
设置（或检索当前）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
等）
对于Chart.js v3.2.0，请执行以下操作：

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

文档：
尽管此代码可能会回答此问题，但提供有关为什么和/或如何回答此问题的附加上下文将显著提高其长期价值。请您的回答添加一些解释。这是否适应2.0版附带的ChartJS中的更改（我认为一年前的问题和公认答案涉及ChartJS 1.x）。也许这个答案会更有用，如果这是简短的解释。如果时间允许的话，也许就对这个评论发表评论吧。谢谢。我不需要使用
beginAtZero
。请注意，这个答案与chart.js的1.x版本相关。2.x版本中的
scales
对象非常不同。请参阅下面的@OferSegev答案和。是否也有v1.x的文档@Boaz@IshanMahajan以前有：）我好像再也找不到了。我认为这是一个很好的镜子：这个答案对我来说更好，因为它明确说明了如何选择缩放起始值，如果不是0，请参见
刻度
名称空间
建议的最大值
的
最小值
、
最大值
和
步长
属性，以获得最小的最大值谢谢。这个
var options = {
    yAxes: [{
        ticks: {
            min: 0,
            max: 100,
            stepSize: 20
        }
    }]
}

100
80
60
40
20
0

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

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

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

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