首页 文章

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

提问于
浏览 次
9

我正在使用chartjs.org 2.2.1并且雷达图表的值介于1..5之间 . 我想将min值设置为0，将max设置为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
    });
javascript chart.js

1 回答

  • 25

    你是对的，但前提是你正在使用Chart.js v1.x .

    在 v2.x （您正在使用的那个）中，刻度选项已更改 .

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

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

    根据您的需要（从0到5的比例），您可以：

    • 将属性 beginAtZero 设置为true，将 max 设置为5

    • 将属性 min 设置为0，将 max 设置为5

    你可以看到here的结果 .

    回复于

相关问题