堆栈内存溢出
  繁体   English   中英

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

[英]How to set max and min value for Y axis

 原文  2015-03-11 15:26:34  2   21    chart.js

问题描述

我正在使用http://www.chartjs.org/的折线图在此处输入图像描述

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

21 个解决方案

解决方案1
 315  2016-02-22 12:30:34

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

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

解决方案2
 76 已采纳  2015-03-11 15:51:46

你必须(applies to ChartJS v1.x)比例，试试这个：（ (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 
    });
}

解决方案3
 73  2016-08-11 13:18:16

 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
 46  2017-02-07 10:19:02

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 轴值，如下所示：

100
80
60
40
20
0

解决方案5
 39  2016-10-25 15:06:10

2016 年写的，而 Chart js 2.3.0 是最新的。 这是改变它的方法

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

解决方案6
 16  2016-09-26 07:51:02

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

解决方案7
 16  2019-02-21 05:39:52

我写了一个 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
 14  2015-05-23 08:11:36

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

ChartJsProvider.setOptions
  scaleBeginAtZero: true

解决方案9
 10  2019-12-11 19:12:50

> 最佳解决方案

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

解决方案10
 8  2015-03-11 15:53:53

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

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

请参阅此处的文档。

解决方案11
 8  2016-05-16 08:56:07

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

解决方案12
 7  2021-05-01 18:08:19

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

解决方案13
 6  2016-06-09 14:53:46

这是 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

解决方案14
 5  2019-01-23 10:33:18

就我而言，我在 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]
                           }
                       }
                   }
               }],

它运作良好。

解决方案15
 3  2020-08-05 02:34:29

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

我终于能够使用chart.options.scales.xAxes[0].ticks.min设置（或检索当前）X 轴最小和最大显示值（即使 min 和 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();

（我发现不需要设置步长值或beginAtZero等）

解决方案16
 2  2016-06-06 15:19:55

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

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

解决方案17
 1  2016-08-29 11:43:44

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

statsData.push(0);

[...]

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

解决方案18
 0  2017-05-26 10:43:32

我在我的多个项目中使用了旧版本的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);

解决方案19
 0  2019-05-10 13:10:10

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

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

解决方案20
 0  2021-08-07 12:55:59

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

解决方案21
 0  2021-08-30 06:23:34

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

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

解决方案22
 0  2021-12-07 14:03:34

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

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

解决方案23
 0  2022-09-13 11:37:09

从最新版本 v3.9.1 开始，您可以像这样设置比例：

options:{
    scales:{
        y:{
            beginAtZero: true,
            max: 500 // values over 500 will be hidden, OR
            suggestedMax: 500, // maximum will be 500, unless there is a higher value
        }
    }
}

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 ChartJS：如何设置固定的 Y 轴最大值和最小值 如何将 y 轴设置为 Chartjs 中的最大数据集值？ 如何在ChartJS的Y轴中设置最小值从数据库接收到的最小值的一步 如何仅在 y 轴上设置最小值和最大值（图表 js） Chartjs：如何在y轴上仅显示最大值和最小值 chart.js 如何强制最小和最大 y 轴值 在 Chart.js 中隐藏 y 轴的最小值和最大值 如何设置在Y轴上显示的最大值的下限？ 如何为Chart轴设置max max取决于Chartjs和Spring Boot的数据？ 如何设置 x 轴上的最大值/最小值以在 Chart.js 中显示时间范围？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM