如何使用chart.js在雷达图中标注轴

Question

我想不同地标记chart.js雷达图中的轴。 轴上标有从1到5的数字（请参见打印屏幕）。 我想使用1 =“否”，2 =“基本”，3 =“熟练”等代替。

是否可以通过雷达图表中的chart.js以某种方式配置，例如通过使用chart.js选项？

提前致谢

Answer 1

由于您使用的是Chart.js版本2.1.3，因此实现所需的内容非常简单。

在任何图表中（包括您正在使用的雷达），值上的标签都存储在options.scale.ticks 。

然后，如果要编辑它们的显示方式，则必须使用Chart.js回调，如下所示：

var options = {
    scale: {
        ticks: {
            beginAtZero: true,
            userCallback: function (value, index, values) {
                // Default callback
                return value;
            }
        }
    }
}

根据需要编辑return值。

---

这是一个jsFiddle ，也是一个完整的示例，使用带有要显示标签的简单数组：

 var ctx = document.getElementById("myChart").getContext("2d"); var notations = { 0: "", 0.5: "", 1: "no", 1.5: "", 2: "basic", 2.5: "", 3: "proficient", 3.5: "", 4: "great", 4.5: "", 5: "outstanding", } var data = { labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"], datasets: [{ label: "My First dataset", 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: [3.25, 2.95, 4.5, 4.05, 2.8, 2.75, 2.0] }, { label: "My Second dataset", backgroundColor: "rgba(255,99,132,0.2)", borderColor: "rgba(255,99,132,1)", pointBackgroundColor: "rgba(255,99,132,1)", pointBorderColor: "#fff", pointHoverBackgroundColor: "#fff", pointHoverBorderColor: "rgba(255,99,132,1)", data: [1.4, 2.4, 2.0, 0.95, 4.8, 1.35, 5.0] }] }; var myChart = new Chart(ctx, { type: "radar", data: data, options: { scale: { ticks: { beginAtZero: true, userCallback: function(value, index, values) { return notations[value]; } } } } }); console.log(myChart); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.js"></script> <canvas id="myChart" width="400" height="400"></canvas>