使用getValue ForDistanceFromCenter获取坐标雷达图Chart JS答案

【问题标题】：Get coordinates radarchart ChartJS using getValueForDistanceFromCenter使用getValue ForDistanceFromCenter获取坐标雷达图Chart JS
【发布时间】：2022-08-18 16:30:06
【问题描述】：

最近我开始尝试chart.js 和radarcharts 的构建。我掌握了基础知识（参见代码中的基本图表），但我想使用图形的 x y 坐标将文本直接放在画布上。经过一番挖掘，我发现无法在雷达图中使用 getValueForPixel 或 getPixelForTick。见githubhttps://github.com/chartjs/Chart.js/issues/5931。在连接线程中引入了一个新方法 getValueForDistanceFromCenter。据我了解，使用这种方法可以计算到中心的距离并使用它来获取坐标。我搜索了 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
});

好问题。请添加相关 Chart.js 库的链接，以便代码 sn-p 在这里运行。

标签： javascript chart.js radar-chart

【解决方案1】：

radialLinear 比例尺（在 2.9.4 版本中，我看到您使用的是版本 2）有方法 getValueForDistanceFromCenter(value) 来获取与中心的距离，但还有另一种方法 getPointPositionForValue(index, value) 可以为您提供点数据的特定索引。

要使用它们并使用这些点在图表上绘制你想要的东西，你需要实现一个插件。在下面的 sn-p 中，我在特定值的点之间绘制了一个矩形。

const ctx = document.getElementById("myChart");
const data = {
  labels: ["Ball Skills", "Shooting", "Physical"],
  datasets: [{
    label: [`ikke`, `jij`],
    backgroundColor: "rgba(38,120,255,0.2)",
    borderColor: "rgba(38,120,255, 1)",
    data: [50, 50, 50]
  }]
};

const 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,
    },
  },
};

const plugin = {
  id: 'getDistance',
  afterDraw(chart) {
    const c = chart.ctx;
    const rScale = chart.scale;
    c.save();
    chart.data.datasets[0].data.forEach(function(item, index) {
      const point = rScale.getPointPositionForValue(0.5 + index, 50);
      c.beginPath();
      c.fillStyle = 'red';
      c.fillRect(point.x - 5, point.y - 5, 10, 10);
      c.fill();
    });
    c.restore();
  }
};

const myChart = new Chart(ctx, {
  type: 'radar',
  plugins: [plugin],
  data: data,
  options: options
});

.myChartDiv {
  max-width: 600px;
  max-height: 400px;
}

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
<html>
  <body>
    <div class="myChartDiv">
      <canvas id="myChart" width="600" height="400"/>
    </div>
  </body>
</html>

【讨论】：