Question

我想在chart.js雷达图表中标注轴的方式不同。轴标有1到5的数字（参见打印屏幕）。我想要而不是1 =＆＃34; No＆＃34;，2 =＆＃34; Basic＆＃34;，3 =＆＃34; Proficient＆＃34;等

这是以雷达图表中的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>

如何用chart.js标记雷达图表中的轴

1 个答案: