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


109

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

Answers:


298

对于Chart.js 2. *,线性刻度配置选项下列出了从零开始的刻度选项。这用于数字数据,y轴很可能就是这种情况。因此,您需要使用以下代码:

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

此处还提供示例折线图其中选项用于y轴。如果您的数值数据在x轴上,请使用xAxes代替yAxes。请注意,数组(和复数)用于yAxes(或xAxes),因为您可能还具有多个轴。


@SuganthanRaj不客气!只要确保您查阅Chart.js 2.0的文档即可。1.0版已发生了很大变化,在线上的大多数示例都适用于1.0版。;)
xnakos

@SuganthanRaj例如,scaleShowVerticalLines不适用于2.0。或工具提示模板。通常,选项遵循2.0中的分层方法。
xnakos


1

请添加此选项:

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

(参考:Chart.js

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


2
它不起作用。我正在使用最新版本的chartjs v2.1
Suganthan Raj

@wmash我需要从预定义的值开始图表。你知道怎么做吗?我尝试将此选项设置为true和false,但是它不起作用。
Michael.D,

这是不正确的,可以/应该删除。beginAtZero: true是您所需要的
三点
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.