Подтвердить что ты не робот

Установите min, max и количество шагов в радарной диаграмме. Js

Я использую chartjs.org 2.2.1 и имею радарную диаграмму, которая имеет значения между 1..5. Я хочу установить значение min равным 0 и max 5 с шагом 1.

Кажется, это точно ответило здесь на сообщение SO. Однако мои диаграммы по-прежнему имеют странный масштаб, а не тот, который я определил в соответствии с моим кодом ниже.

Может ли кто-нибудь увидеть, что я делаю неправильно здесь?

    var options = {
        responsive: false,
        maintainAspectRatio: true
    };

    var dataLiteracy = {
        labels: [
            @PointLabel("Literacy", 1), @PointLabel("Literacy", 2), @PointLabel("Literacy", 3),
            @PointLabel("Literacy", 4), @PointLabel("Literacy", 5)
        ],
        datasets: [
            {
                label: "Literacy",
                backgroundColor: "rgba(179,181,198,0.2)",
                borderColor: "rgba(179,181,198,1)",
                pointBackgroundColor: "rgba(179,181,198,1)",
                pointBorderColor: "#fff",
                pointHoverBackgroundColor: "#fff",
                pointHoverBorderColor: "rgba(179,181,198,1)",
                data: [
                    @PointValue("Literacy", 1), @PointValue("Literacy", 2), @PointValue("Literacy", 3),
                    @PointValue("Literacy", 4), @PointValue("Literacy", 5)
                ]
            }
        ]
    };

    var ctx = $("#chartLiteracy");
    var myRadarChart = new Chart(ctx,
    {
        type: 'radar',
        data: dataLiteracy,
        options: options,
        scaleOverride: true,
        scaleSteps: 5,
        scaleStepWidth: 1,
        scaleStartValue: 0
    });
4b9b3361

Ответ 1

Вы правы, но только если вы используете Chart.js v1.x.

Параметры Ticks изменились в v2.x (тот, который вы используете).


Если вы хотите редактировать метки радара, вам нужно будет отредактировать атрибут ticks в параметрах диаграммы:
var options = {
    scale: {
        ticks: {
            // changes here
        }
    }
};

Из того, что вам нужно (введите масштаб от 0 до 5), вы можете:

  • установите для атрибута beginAtZero значение true и max - 5
  • установите атрибут min на 0 и max на 5

Вы можете увидеть здесь результат.

Ответ 2

Установите значение stepSize

scale: {
    ticks: {
        beginAtZero: true,
        max: 5,
        min: 0,
        stepSize: 1
    }
}