如何使用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>