ChartJS:如何为Y轴设置最大值和最小值。

I am using line chart from http://www.chartjs.org/ ChartJS:如何为Y轴设置最大值和最小值。

我用的是http://www.chartjs.org/的线形图。

As you can see max value (130) and min value (60) for Y axis are chosen automatically , I want max value = 500 and min value=0. Is this possible?

您可以看到，对于Y轴的最大值(130)和最小值(60)是自动选择的，我希望max值= 500，最小值=0。这是可能的吗?

13 个解决方案

#1

You have to overrride the scale, try this:

你必须超越规模，试试这个:

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 
    });
}

#2

143

For chart.js V2 (beta), use:

为图表。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.
            }
        }]
    }
};

See chart.js documentation on linear axes configuration for more details.

见图。关于线性轴配置的js文档更多细节。

#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>

#4

ChartJS v2.4.0

As shown in the examples at https://github.com/jtblin/angular-chart.js on the 7th of febuary 2017 (since this seems to be subject to frequent change):

在2017年2月7日的https://github.com/jtblin/angular-chart.js的例子中(因为这似乎是经常发生的变化):

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

This will result in 5 y-axis values as such:

这将导致5个y轴值:

#5

The above answers didn't work for me. Possibly the option names were changed since '11, but the following did the trick for me:

上面的答案对我不起作用。也许期权的名称在11年之后就已经改变了，但是下面的方法对我来说就是:

ChartJsProvider.setOptions
  scaleBeginAtZero: true

#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    
                    }
                  }]
               }
            }
});

I configure with 'options' in v2.

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

You should read documentation: http://www.chartjs.org/docs/#scales-linear-scale

您应该阅读文档:http://www.chartjs.org/docs/#scales- linearscale。

#7

Writing this in 2016 while Chart js 2.3.0 is the latest one. Here is how one can change it

在2016年撰写这篇文章，而图表js 2.3.0是最新的一个。这是一个人如何改变它。

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

#8

Just set the value for scaleStartValue in your options.

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

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

See the documentation for this here.

请参阅这里的文档。

#9

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

#10

This is for Charts.js 2.0:

这是图表。js 2.0:

The reason some of these are not working is because you should declare your options when you create your chart like so:

其中一些不工作的原因是，当您创建图表时，应该声明您的选项:

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

    });
})

Documentation for this is here: http://www.chartjs.org/docs/#scales

这里有一个文档:http://www.chartjs.org/docs/#scale。

#11

With 1.1.1, I used the following to fix the scale between 0.0 and 1.0:

在1.1.1中，我使用以下的方法来修正0.0和1.0之间的比例:

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

#12

Since none of the suggestions above helped me with charts.js 2.1.4, I solved it by adding the value 0 to my data set array (but no extra label):

因为以上的建议都没有帮助我做图表。我通过将值0添加到我的数据集数组(但是没有额外的标签)来解决这个问题:

statsData.push(0);

[...]

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

#13

I was using a old version of Flat Lab template in multiple projects of mine which were using v1.x of chart.js which I'm not sure of.I could not update to v2.x as I already had multiple projects working with it. The above mentioned (bardata,options) was not working for me.

我在使用v1的多个项目中使用了一个旧版本的平面实验室模板。x的图表。我不太确定。我无法更新到v2。因为我已经有多个项目在使用它。上面提到的(bardata,options)对我不起作用。

So here is the hack for version 1.x

这是版本1。x的hack。

calculatedScale = calculateScale(scaleHeight,valueBounds.maxSteps,valueBounds.minSteps,valueBounds.maxValue,valueBounds.minValue,labelTemplateString);

Replace it with:

换成:

calculatedScale = calculateScale(scaleHeight,valueBounds.maxSteps,1,valueBounds.maxValue,0,labelTemplateString);

#1