Chartjs：如何抵消雷达图上的刻度？

Question

我正在尝试用 ChartJs 模仿这个 Radarchart。

如何像这样向左偏移刻度？

我有什么（下）

        options: {
            scale: {
                ticks: {
                    min: 0,
                    max: 5,
                    stepSize: 1,
                    showLabelBackdrop: false,
                    beginAtZero: true,
                },
                gridLines: {
                    color: 'rgba(0, 0, 0, 0.3)'
                },
                angleLines: {
                    display: false
                },
            },
        },

另外：是否可以显示 0？

Answer 1

在图表选项中试试这个：

 ticks: {
    callback: (value) => {
      return '${value}';
    },

Answer 2

你需要做两件事。

要显示 0 刻度，请将此添加到您的 options.scale 对象：

ticks: {
  beginAtZero: true,
  min: -0.001,
}

请注意，如果将 min 设置为零，它将不起作用。这就是雷达滴答引擎的工作原理。

要向标签添加偏移量，请覆盖同一对象内的刻度渲染回调，如下所示：

ticks: {
  callback: (value) => `${value}           `,
}

注意末尾的多余空格。这是填充。请参阅下面的示例

var options = {
  responsive: false,
  maintainAspectRatio: true,
  scale: {
    ticks: {
      beginAtZero: true,
      callback: (value) => `${value}           `,
      min: -0.001,
      max: 5
    }
  }
};

var dataLiteracy = {
  labels: [
    "1", "2", "3", "4", "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: [
      2, 3, 4, 1, 2
    ]
  }]
};

var ctx = document.getElementById("canvas");
var myRadarChart = new Chart(ctx, {
  type: 'radar',
  data: dataLiteracy,
  options: options
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.min.js"></script>

<canvas id="canvas" height="400" width="400"></canvas>

Chartjs：如何抵消雷达图上的刻度？

Chartjs: How to offset ticks on radarchart?

radar-chart

chart.js