如何设置 Y 轴的最大值和最小值答案

【问题标题】：How to set max and min value for Y axis如何设置 Y 轴的最大值和最小值
【发布时间】：2015-05-13 11:36:59
【问题描述】：

正如您所见，Y 轴的最大值 (130) 和最小值 (60) 是自动选择的，我希望最大值 = 500 和最小值 = 0。这可能吗？

【问题讨论】：

【解决方案1】：

对于 chart.js V2（测试版），使用：

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.
            }
        }]
    }
};

【讨论】：

另见ticks命名空间的min、max和stepsize属性
suggestedMax 为最小值

【解决方案2】：

你必须覆盖比例，试试这个：(applies to 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 的1.x 版本相关。2.x 版本中的scales 对象完全不同。请参阅下面的@OferSegev 答案和2.x documentation here。
是否也有 v1.x 的文档@Boaz
@IshanMahajan 曾经有 :) 我似乎再也找不到它了。我认为这是一面好镜子：web-beta.archive.org/web/20150816192112/http://…

【解决方案3】：

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>

【讨论】：

在 2.4.0 中工作得很好

【解决方案4】：

ChartJS v2.4.0

如 2017 年 2 月 7 日https://github.com/jtblin/angular-chart.js 的示例所示（因为这似乎经常更改）：

var options = {
    yAxes: [{
        ticks: {
            min: 0,
            max: 100,
            stepSize: 20
        }
    }]
}

这将产生 5 个 y 轴值：

【讨论】：

我很惊讶这能起作用，因为我认为xAxes 和yAxes 应该嵌套在选项中的scales 下。再加上这比 Ofer Sergev 似乎正确的答案更新，这也令人惊讶。

【解决方案5】：

在 2021 年 11 月，此方法有效。这是一个可以改变它的方法

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

【讨论】：

这个锅很完美。

【解决方案6】：

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

【讨论】：

谢谢。这个在 chart.js 的 v2.5 上为我工作。简单有效。
文档太令人沮丧了......我必须搜索人们的例子来猜测可用的选项。
如果有人使用纯javascript，这个答案是正确的。我用这个写了一个小例子，并在下面发布了我完整的 js 代码。

【解决方案7】：

我写了一个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,
        }
      }]
    }
  }
});

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

【讨论】：

【解决方案8】：

以上答案对我不起作用。自 11 年以来，选项名称可能已更改，但以下内容对我有用：

ChartJsProvider.setOptions
  scaleBeginAtZero: true

【讨论】：

【解决方案9】：

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

【讨论】：

很高兴看到有人实际引用 chartJS 3 而不是旧的 v1 或 v2 版本。

【解决方案10】：

>最佳解决方案

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

【讨论】：

【解决方案11】：

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

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

请参阅此here 的文档。

【讨论】：

这个答案对我来说更好，因为它明确了如何选择比例起始值，如果不是 0

【解决方案12】：

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

【讨论】：

虽然此代码可能会回答问题，但提供有关 why 和/或如何回答问题的额外上下文将显着改善其长期价值。请edit你的答案添加一些解释。

【解决方案13】：

这适用于 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
                    }
                }]
            }
        }

    });
})

相关文档在这里： http://www.chartjs.org/docs/#scales

【讨论】：

这是否适应了 ChartJS 2.0 版中的变化（我认为一年前的问题和接受的答案涉及 ChartJS 1.x）。如果简短地解释一下，也许这个答案会更有帮助。如果时间允许，也许只是评论这个评论。谢谢。
我不需要使用beginAtZero。

【解决方案14】：

就我而言，我在 yaxis 刻度中使用了回调，我的值是百分比，当它达到 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]
                           }
                       }
                   }
               }],

而且效果很好。

【讨论】：

与这个问题无关？
部分，我还为他可能遇到的问题添加了解决方案。

【解决方案15】：

对此有很多相互矛盾的答案，其中大部分对我没有影响。

我终于能够使用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等）

【讨论】：

他是我唯一可行的答案。

【解决方案16】：

在 1.1.1 中，我使用以下方法将比例固定在 0.0 和 1.0 之间：

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

【讨论】：

答案已过时

【解决方案17】：

由于上述建议都没有帮助我使用 chart.js 2.1.4，我通过将值 0 添加到我的数据集数组（但没有额外的标签）来解决它：

statsData.push(0);

[...]

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

【讨论】：

令人震惊的是，除了这个答案之外，没有一个答案对我有用！ beginAtZero 和SuggestedMin 因小值而被破坏

【解决方案18】：

v3.X (v3.5.0)

线性笛卡尔坐标轴

let options = {
  scales: {
    y: {
      beginAtZero: true,
      suggestedMax: 69
    },
    x: {
      beginAtZero: true,
      suggestedMax: 420
    },
    ticks: {
      stepSize: 1
    }
  }
}

参考。 https://www.chartjs.org/docs/3.5.0/axes/cartesian/linear.html

线性径向轴


let options = {
  scales: {
    r: {
      beginAtZero: true,
      suggestedMax: 5,
      ticks: {
        stepSize: 1
      }
    }
  }
}

参考。 https://www.chartjs.org/docs/3.5.0/axes/radial/linear.html

v2.X (v2.9.4)

线性笛卡尔坐标轴

let options = {
    scale: {
      ticks: {
        beginAtZero: true,
        stepSize: 1,
        suggestedMax: 5,
      }
    }
}

参考。 https://www.chartjs.org/docs/2.9.4/axes/cartesian/linear.html

线性径向轴

let options = {
  scale: {
    ticks: {
      beginAtZero: true,
      stepSize: 1,
      suggestedMax: 5,
    }
  }
}

参考。 https://www.chartjs.org/docs/2.9.4/axes/radial/linear.html

注意：v2 为单数，v3 为复数

【讨论】：

【解决方案19】：

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

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

【讨论】：

【解决方案20】：

是的，您可以将其设置为 min 和 max 范围

options: {
            resposive: true,
            title: {
                display: true
            },
            hover: {
                mode: 'index',
                intersect: true
            },
            scales: {
                y: {
                    suggestedMin: 0,
                    suggestedMax: 500
                }
            }
        }

【讨论】：