设置雷达chart.js中的最小值,最大值和步数

Question

我正在使用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
    });

Answer 1

你是对的,但只有当你使用chart.js之1.x版.

在v2.x(您正在使用的那个)中,Ticks选项已更改.

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

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

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

• 将该属性设置beginAtZero为true并设置max为5
• 将属性设置min为0和max5

你可以在这里看到结果.

Answer 2

从ChartJS 3开始，最小/最大刻度值不是scale.ticks在options.scale或options.scales[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].maxscales
.[x/y]Axes.ticks.min 已重命名为scales[id].min

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

Answer 3

设置值 stepSize

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

Answer 4

在v3.8.0上只有这个模式对我有用

 options: {
   maintainAspectRatio: false,
   scales: {
     r: {
       min: 0,
       max: 5,
       beginAtZero: true,
       angleLines: {
         color: "red",
      },
    },
 }