在radar chart.js中设置最小值、最大值和步数

xmd2e60i 于 2022-11-23 发布在 Chart.js

关注(0)|答案(4)|浏览(313)

我使用的是chartjs.org 2.2.1，雷达图的值在1..5之间。我想将最小值设置为0，最大值设置为5，步长为1。
这似乎在这个SO post中得到了确切的回答。但是我的图表仍然有一个奇怪的比例，而不是我按照下面的代码定义的比例。
有人能看出我做错了什么吗？

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

chart.js

来源：https://stackoverflow.com/questions/39249722/set-min-max-and-number-of-steps-in-radar-chart-js

4条答案

按热度按时间

7jmck4yq1#

您是对的，但前提是您使用的是Chart.js***v1.x***。
在***v2.x***（您正在使用的版本）中，记号选项已更改。
如果要编辑雷达图分笔成交点，则需要编辑图表选项中的ticks属性：

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

根据您的需要（从0到5进行评分），您可以：

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

您可以看到here的结果。

赞(0）回复(0）举报 2022-11-23

mbzjlibv2#

设置stepSize的值

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

赞(0）回复(0）举报 2022-11-23

ymdaylpp3#

从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 ：
比例.[x/y]轴.ticks.max已重命名为比例[id].max
scales.[x/y]Axes.ticks.min已重命名为scales[id].min
https://codepen.io/JCH77/pen/abNymae

赞(0）回复(0）举报 2022-11-23

kcwpcxri4#

在v3.8.0上只有此模式对我有效

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

赞(0）回复(0）举报 2022-11-23

我来回答

在radar chart.js中设置最小值、最大值和步数

4条答案

相关问题

热门标签

最新问答