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

时间:2015-03-11 15:26:35

标签: chart.js

我正在使用http://www.chartjs.org/的折线图 enter image description here

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

20 个答案:

答案 0 :(得分:205)

对于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 documentation on linear axes configuration

答案 1 :(得分:63)

你必须覆盖比例,试试这个:

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 :(得分:41)



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>
&#13;
&#13;
&#13;

答案 3 :(得分:33)

ChartJS v2.4.0

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

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

这将导致5个y轴值:

100
80
60
40
20
0

答案 4 :(得分:20)

在2016年写这个,而Chart js 2.3.0是最新的。以下是如何改变它的方式

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

答案 5 :(得分:15)

以上答案对我不起作用。可能自11年以来选项名称发生了变化,但以下是我的诀窍:

ChartJsProvider.setOptions
  scaleBeginAtZero: true

答案 6 :(得分:13)

FirebaseMessaging.getInstance().subscribeToTopic(topicName)

我在v2中使用'options'进行配置。

你应该阅读文档: http://www.chartjs.org/docs/#scales-linear-scale

答案 7 :(得分:7)

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

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

请参阅此here的文档。

答案 8 :(得分:7)

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

答案 9 :(得分:7)

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

答案 10 :(得分:4)

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

答案 11 :(得分:3)

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

这是网络上显示的图形。

Percentage of vehicles in the town

答案 12 :(得分:2)

使用1.1.1,我使用以下内容来修正0.0和1.0之间的比例:

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

答案 13 :(得分:2)

对此有很多矛盾的答案,其中大多数对我没有影响。

我终于可以使用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等)

答案 14 :(得分:0)

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

statsData.push(0);

[...]

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

答案 15 :(得分:0)

我在我的多个项目中使用了旧版本的Flat Lab模板,这些项目使用的是chart.js的v1.x,我不确定。我无法更新到v2.x,因为我已经有多个项目使用它。 上面提到的(bardata,options)对我不起作用。

所以这是版本1.x

的黑客攻击
calculatedScale = calculateScale(scaleHeight,valueBounds.maxSteps,valueBounds.minSteps,valueBounds.maxValue,valueBounds.minValue,labelTemplateString);

将其替换为:

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

答案 16 :(得分:0)

就我而言,我在yaxis刻度中使用了回调, 我的值以百分比表示,当达到100%时不显示点,我使用了这个:

      yAxes: [{
                   ticks: {
                       beginAtZero: true,
                       steps: 10,
                       stepValue: 5,
                       max: 100.1,
                       callback: function(value, index, values) {
                           if (value !== 100.1) {
                               return values[index]
                           }
                       }
                   }
               }],

效果很好。

答案 17 :(得分:0)

图表的“最小”和“最大”值。 此链接上的文档

https://www.chartjs.org/docs/latest/axes/cartesian/linear.html

答案 18 :(得分:0)


>最佳解决方案


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

答案 19 :(得分:0)

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 中用复数