как установить начальное значение как «0» в chartjs?


110

вот мой код. Мне нужно установить начальное значение как «0» в масштабах оси x и y. Я пробовал опцию весов последней версии.

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

Ответы:


299

Для Chart.js 2. * вариант, когда масштаб начинается с нуля, указан в параметрах конфигурации линейного масштаба . Это используется для числовых данных, что, скорее всего, должно быть в случае вашей оси Y. Итак, вам нужно использовать это:

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

Образец линия диаграмма также доступна здесь , где опция используется для оси у. Если ваши числовые данные находятся на оси 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 )

NB: исходное решение, которое я опубликовал, было для Highcharts, если вы не используете Highcharts, удалите тег, чтобы избежать путаницы.


2
это не работает . Я использую последнюю версию chartjs v2.1
Suganthan Raj

@wmash Мне нужно запустить диаграмму с предопределенного значения. Ты знаешь как это сделать? Я попытался установить для этой опции значение true и false, но это не сработало.
Michael.D

это неверно и может / должно быть удалено. beginAtZero: trueэто то, что вам нужно
тройной
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.