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

时间:2016-06-20 12:23:39

标签: charts chart.js

这是我的代码。我需要在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);
   }     

4 个答案:

答案 0 :(得分:186)

对于Chart.js 2. *,缩放从零开始的选项列在configuration options of the linear scale下。这用于数值数据,最有可能是y轴的情况。所以,你需要使用它:

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

示例折线图也可用here,其中该选项用于y轴。如果您的数字数据位于x轴上,请使用xAxes代替yAxes。请注意,数组(和复数)用于yAxes(或xAxes),因为您可能还有多个轴。

答案 1 :(得分:2)

请添加此选项:

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

(参考:Chart.js

N.B:我发布的原始解决方案是针对Highcharts,如果您不使用Highcharts,请删除标签以避免混淆

答案 2 :(得分:0)

如果像我一样,您可能需要将其用作默认配置,只需将min: 0放在节点defaults.scale.ticks内,如下所示:

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

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

答案 3 :(得分:0)

现在(5 年后和 3.x 版)有点不同

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

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