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

【问题标题】：how to set start value as "0" in chartjs?如何在chartjs中将起始值设置为“0”？
【发布时间】：2016-10-21 17:00:50
【问题描述】：

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

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

【问题讨论】：

标签： charts chart.js

【解决方案1】：

对于 Chart.js 2.*，刻度从零开始的选项列在 configuration options of the linear scale 下方。这用于数值数据，这很可能是您的 y 轴的情况。所以，你需要使用这个：

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

还提供了一个示例折线图here，其中该选项用于 y 轴。如果您的数值数据在 x 轴上，请使用 xAxes 而不是 yAxes。请注意，数组（和复数）用于yAxes（或xAxes），因为您也可以有多个轴。

【讨论】：

@SuganthanRaj 欢迎您！只要确保您查阅 Chart.js 2.0 的文档即可。与 1.0 版本相比发生了很多变化，大多数在线示例都适用于 1.0 版本。 ;)
@SuganthanRaj 例如，scaleShowVerticalLines 对 2.0 无效。或工具提示模板。一般来说，选项在 2.0 中遵循分层方法。

【解决方案2】：

现在（5 年后和版本 3.x）有点不同

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

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

【讨论】：

感谢 Chart.js 3 解决方案。

【解决方案3】：

如果您需要将其用作默认配置，只需将min: 0 放在节点defaults.scale.ticks 内即可，如下所示：

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

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

【讨论】：

【解决方案4】：

请添加此选项：

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

（参考：Chart.js）

注意：我发布的原始解决方案是针对 Highcharts，如果您没有使用 Highcharts，请删除标签以避免混淆

【讨论】：

它不工作。我正在使用最新版本的 chartjs v2.1
@wmash 我需要从预定义的值开始图表。你知道怎么做吗？我试着把这个选项设置为真假，但它不起作用。
这是不正确的，可以/应该删除。 beginAtZero: true 是你所需要的