Set min, max and number of steps in radar chart.js

时间:2016-08-31 12:30:16

标签: javascript chart.js

I am using chartjs.org 2.2.1 and have a radar chart that has values between 1..5. I want to set the min value to 0 and max to 5 with a step of 1.

This seemed to be answered exactly here in this SO post. However my charts still have a weird scale and not the one that I have defined as per my code below.

Can anyone see what I am doing wrong here?

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

3 个答案:

答案 0 :(得分:31)

你是对的,但前提是你使用的是Chart.js v1.x

Ticks选项在 v2.x (您正在使用的那个)中发生了变化。

<小时/> 如果要编辑雷达刻度,则需要在图表选项中编辑ticks属性:

var options = {
    scale: {
        ticks: {
            // changes here
        }
    }
};

根据您的需要(从0到5的比例),您可以:

  • 将属性beginAtZero设置为true,将max设置为5
  • 将属性min设置为0,将max设置为5

您可以看到here结果。

答案 1 :(得分:0)

设置stepSize

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

答案 2 :(得分:0)

ChartJS 3 开始,未在scale.ticks中指定最小/最大比例值,但在scalescales[id]对象中指定了最小/最大比例值,例如:

new Chart(hostElement, {
    type: "radar",
    data,
    options: {
        scale: {
            min: 0,
            max: 100,
        },
    },
});

https://www.chartjs.org/docs/latest/axes/radial/linear.html#linear-radial-axis

scales。[x / y] Axes.ticks.max重命名为scales [id] .max
scales。[x / y] Axes.ticks.min重命名为scales [id] .min

https://codepen.io/JCH77/pen/abNymae