如何在 chartjs 中将起始值设置为“0”？

这是我的密码。我需要在 x 轴和 y 轴的刻度中将初始值设置为“0”。我已经尝试了最新的版本缩放选项。

graphOptions = {
///Boolean - Whether grid lines are shown across the chart
scaleShowGridLines: false,
tooltipTitleTemplate: "<%= label%>",
//String - Colour of the grid lines
scaleGridLineColor: "rgba(0,0,0,.05)",
//Number - Width of the grid lines
scaleGridLineWidth: 1,
//Boolean - Whether to show horizontal lines (except X axis)
scaleShowHorizontalLines: true,
//Boolean - Whether to show vertical lines (except Y axis)
scaleShowVerticalLines: true,
//Boolean - Whether the line is curved between points
bezierCurve: true,
//Number - Tension of the bezier curve between points
bezierCurveTension: 0.4,
//Boolean - Whether to show a dot for each point
pointDot: true,
//Number - Radius of each point dot in pixels
pointDotRadius: 4,
//Number - Pixel width of point dot stroke
pointDotStrokeWidth: 1,
pointHitDetectionRadius: 20,
datasetStroke: true,
datasetStrokeWidth: 2,
datasetFill: true,
legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].strokeColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"
};
var LineChart = new Chart(ctx).Line(graphData, graphOptions);
}
175413 次浏览
小开

请添加以下选项:

//Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
scaleBeginAtZero : true,

(参考资料: Chart.js)

注意: 我发布的原始解决方案是针对高清图表的，如果你没有使用高清图表，那么请删除标签以避免混淆

小开
最佳答案

对于 Chart.js 2。* ，比例从零开始的选项列于 线性规模的配置选项下。这是用于数值数据的，最有可能的情况就是 y 轴。所以，你需要用这个:

options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}

还有一个示例线图 给你，其中对 y 轴使用了该选项。如果数值数据在 x 轴上，则使用 xAxes而不是 yAxes。请注意，yAxes(或 xAxes)使用数组(和复数) ，因为您可能也有多个轴。

小开

如果需要使用它作为默认配置，只需将 min: 0放在节点 defaults.scale.ticks中，如下所示:

defaults: {
global: {...},
scale: {
...
ticks: { min: 0 },
}
},

参考资料: https://www.chartjs.org/docs/latest/axes/

小开

现在(5年后，版本3.x)有点不同了

options: {
scales: {
y: {
beginAtZero: true
}
}
}

见: https://www.chartjs.org/docs/latest/#creating-a-chart


提交答案