ChartJS: как установить максимальное и минимальное значение для оси Y

Я использую линейный график отhttp://www.chartjs.org/

Как вы можете видеть, максимальное значение (130) и минимальное значение (60) для оси Y выбираются автоматически , я хочу, чтобы максимальное значение = 500 и минимальное значение=0. Это возможно?

13 104
chart.js

13 ответов:

вы должны переопределить масштаб, попробуйте это:

window.onload = function(){
    var ctx = document.getElementById("canvas").getContext("2d");
    window.myLine = new Chart(ctx).Line(lineChartData, {
        scaleOverride : true,
        scaleSteps : 10,
        scaleStepWidth : 50,
        scaleStartValue : 0 
    });
}
53

для диаграммы.js V2 (бета), использование:

var options = {
    scales: {
        yAxes: [{
            display: true,
            ticks: {
                suggestedMin: 0,    // minimum will be 0, unless there is a lower value.
                // OR //
                beginAtZero: true   // minimum value will be 0.
            }
        }]
    }
};

посмотреть диаграмма.JS документация по конфигурации линейных осей для более подробной информации.

162

var config = {
            type: 'line',
            data: {
                labels: ["January", "February", "March", "April", "May", "June", "July"],
                datasets: [{
                        label: "My First dataset",
                        data: [10, 80, 56, 60, 6, 45, 15],
                        fill: false,
                        backgroundColor: "#eebcde ",
                        borderColor: "#eebcde",
                        borderCapStyle: 'butt',
                        borderDash: [5, 5],
                    }]
            },
            options: {
                responsive: true,
                legend: {
                    position: 'bottom',
                },
                hover: {
                    mode: 'label'
                },
                scales: {
                    xAxes: [{
                            display: true,
                            scaleLabel: {
                                display: true,
                                labelString: 'Month'
                            }
                        }],
                    yAxes: [{
                            display: true,
                            ticks: {
                                beginAtZero: true,
                                steps: 10,
                                stepValue: 5,
                                max: 100
                            }
                        }]
                },
                title: {
                    display: true,
                    text: 'Chart.js Line Chart - Legend'
                }
            }
        };

        var ctx = document.getElementById("canvas").getContext("2d");
       new Chart(ctx, config);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.bundle.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <canvas id="canvas"></canvas>
</body>
29

ChartJS v2.4. 0

как показано в примерах на https://github.com/jtblin/angular-chart.js 7 февраля 2017 года (поскольку это, похоже, подвержено частым изменениям):

var options = {
    yAxes: [{
        ticks: {
            min: 0,
            max: 100,
            stepSize: 20
        }
    }]
}

это приведет к 5 значениям оси y как таковым:

100
80
60
40
20
0
24

написание этого в 2016 году, в то время как диаграмма js 2.3.0 является последней. Вот как это можно изменить

              var options = {
                    scales: {
                       yAxes: [{
                                display: true,
                                stacked: true,
                                ticks: {
                                    min: 0, // minimum value
                                    max: 10 // maximum value
                                }
                       }]
                    }
               };
15

приведенные выше ответы не работают для меня. Возможно, имена были изменены, начиная с 11, но ниже сделал трюк для меня:

ChartJsProvider.setOptions
  scaleBeginAtZero: true
14
window.onload = function(){
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx ,{
          type: 'line',
          data: yourData,
          options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero:true,
                        min: 0,
                        max: 500    
                    }
                  }]
               }
            }
});

я настраиваю с "параметры" в v2.

вы должны прочитать документацию: http://www.chartjs.org/docs/#scales-linear-scale

12

просто установите значение scaleStartValue в ваши варианты.

var options = {
   // ....
   scaleStartValue: 0,
}

смотрите документацию для этого здесь.

7
yAxes: [{
    display: true,
    ticks: {
        beginAtZero: true,
        steps:10,
        stepValue:5,
        max:100
    }
}]
7

Это для графики.js 2.0:

причина, по которой некоторые из них не работают, заключается в том, что вы должны объявить свои параметры при создании диаграммы следующим образом: 

$(function () {
    var ctxLine = document.getElementById("myLineChart");
    var myLineChart = new Chart(ctxLine, {
        type: 'line',
        data: dataLine,
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        min: 0,
                        beginAtZero: true
                    }
                }]
            }
        }

    });
})

документация для этого здесь: http://www.chartjs.org/docs/#scales

7

С 1.1.1, я использовал следующее, чтобы исправить масштаб между 0.0 и 1.0:

var options = {
    scaleOverride: true,
    scaleStartValue: 0,
    scaleSteps: 10,
    scaleStepWidth: 0.1
}
2

Так как ни одно из предложений выше не помогло мне с диаграммами.js 2.1.4, я решил его, добавив значение 0 в массив набора данных (но без дополнительной метки):

statsData.push(0);

[...]

var myChart = new Chart(ctx, {
    type: 'horizontalBar',
    data: {
        datasets: [{
            data: statsData,
[...]
0

я использовал старую версию шаблона плоской лаборатории в нескольких моих проектах, которые использовали v1.х диаграммы.js, в котором я не уверен.Я не мог обновить до V2.x поскольку у меня уже было несколько проектов, работающих с ним. Вышеупомянутое (bardata,options) не работает для меня.

Так вот хак для версии 1.x

calculatedScale = calculateScale(scaleHeight,valueBounds.maxSteps,valueBounds.minSteps,valueBounds.maxValue,valueBounds.minValue,labelTemplateString);

заменить:

calculatedScale = calculateScale(scaleHeight,valueBounds.maxSteps,1,valueBounds.maxValue,0,labelTemplateString);
0