我正在使用http://www.chartjs.org/上的折线图
正如你可以看到Y轴的最大值(130)和最小值(60)是自动选择的，我想要最大值= 500和最小值=0。这可能吗?
当前回答
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
其他回答
关于这个问题，有很多相互矛盾的答案，其中大多数对我没有任何影响。
我终于能够用chart.options.scales.xAxes[0].ticks设置(或检索当前)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等)
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>
从最新版本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
}
}
}
上面的答案对我不起作用。可能从11年起，选项名称就发生了变化，但以下内容对我来说是有用的:
ChartJsProvider.setOptions
scaleBeginAtZero: true
我写了一个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, } }] } } });
这是显示在网页上的图表。
