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