如何使用getValueForDistanceFromCenter和Chart.js获取雷达图坐标?

5tmbdcev  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(207)

我正在尝试用Chart.js来构建radar charts。我掌握了基本知识(见下面的基本图表),但我想使用图形的x y坐标将文本直接放置在画布上。
经过一番挖掘,我发现在雷达图中使用getValueForPixelgetPixelForTick是不可能的。请参见github issue。在连接线程中,引入了一个新的方法getValueForDistanceFromCenter
据我所知,使用此方法可以计算与center的距离,并使用它来获取坐标。我搜索了Chart.js文档和其他站点,但没有找到任何代码示例或有关如何实现此功能的信息。
有人能给我指出如何在代码中实现方法的正确方向吗?

var data = {
  labels: ["Ball Skills", "Shooting", "Physical"],
  datasets: [{
    label: [`ikke`, `jij`],
    backgroundColor: "rgba(38,120,255,0.2)",
    borderColor: "rgba(38,120,255, 1)",
    data: [90, 90, 90]
  }]
};

var options = {
  responsive: true,
  tooltips: false,
  title: {
    text: 'Basic example',
    display: true,
    position: `bottom`,
  },
  scale: {
    angleLines: {
      display: true
    },
    ticks: {
      suggestedMin: 0,
      suggestedMax: 100,
      stepSize: 25,
      maxTicksLimit: 11,
      display: false,
    }
  },
  legend: {
    labels: {
      padding: 10,
      fontSize: 14,
      lineHeight: 30,
    },
  },
};

var myChart = new Chart(document.getElementById("chart"), {
  type: 'radar',
  data: data,
  options: options
});
6ie5vjzr

6ie5vjzr1#

radialLinear标尺(在版本2.9.4中,我看到您使用的是版本2)有一种方法getValueForDistanceFromCenter(value)可以获得与中心的距离,但还有另一种方法getPointPositionForValue(index, value)可以在数据的指定索引处提供点。
要使用它们并使用这些点在图表上画出你想要的东西,你需要实现一个插件。在下面的代码片段中,我在一个特定值的点之间画了一个矩形。
第一个

相关问题