如何沿 Chartjs 甜甜圈弧获得特定坐标答案

【问题标题】：How to get specific co-ordinate along Chartjs donut arc如何沿 Chartjs 甜甜圈弧获得特定坐标
【发布时间】：2023-02-02 23:44:21
【问题描述】：

我需要找到每个弧的具体 x 和 y 坐标。下面的照片准确地说明了我需要的坐标，根据每个弧线进行了颜色编码。我需要每个圆弧元素的 x 和 y 坐标这两个点。

这是一个示例弧对象（来自我自己的项目）：

下面是一些示例代码：

const data = {
        labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        datasets: [{
          label: 'Weekly Sales',
          data: [18, 12, 6, 9, 12, 3, 9],
          backgroundColor: [
            'rgba(255, 26, 104, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(255, 159, 64, 0.2)',
            'rgba(0, 0, 0, 0.2)'
          ],
          borderColor: [
            'rgba(255, 26, 104, 1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)',
            'rgba(0, 0, 0, 1)'
          ],
          borderWidth: 1,
          cutout: '70%'
        }]
      };

      const donutArc = {
        id: 'donutArc',
        afterDraw: (chart) => {
          const { ctx, data: { datasets }, } = chart;
          
          datasets.forEach((dataset, i) =>{
            chart.getDatasetMeta(i).data.forEach((arc, j) => {
                console.log(arc)
            })
          })

        }
      }

      // config 
      const config = {
        type: 'doughnut',
        data,
        options: {
          plugins: {
            legend: {
              display: false
            }
          }
        },
        plugins: [donutArc]
      };

      // render init block
      const myChart = new Chart(
        document.getElementById('myChart'),
        config
      );

完整代码可以在这里找到：https://jsfiddle.net/tpLrxb53/。

我很确定这涉及处理 startAngle 和 endAngle，但我无法在此处的文档中理解它们：https://www.chartjs.org/docs/latest/api/classes/ArcElement.html

任何解释/解决方案将不胜感激

【问题讨论】：

以单位考虑。你有中心。那是一回事。能够在图片上显示点。你有角度。你有距离。尝试以一定角度和距离从中心移动一个点。在该屏幕上打印结果点。看看是否正确。永远不要一次处理整个问题。总是只考虑问题的微小部分。

标签： javascript math chart.js donut-chart

【解决方案1】：

您可以使用公式在圆上获得积分

x = 半径*sin(角度), y = 半径*cos(角度)

所以我想在你的代码中你可以做类似的事情

const donutArc = {
    id: 'donutArc',
    afterDraw: (chart) => {
    const { ctx, data: { datasets }, } = chart;     
    datasets.forEach((dataset, i) =>{
        chart.getDatasetMeta(i).data.forEach((arc, j) => {
            r1 = arc.innerRadius
            r2 = arc.outerRadius
            xinner = r1*Math.sin(arc.startAngle)
            yinner = r1*Math.cos(arc.startAngle)
            xouter = r2*Math.sin(arc.startAngle)
            youter = r2*Math.cos(arc.startAngle)
            // then I guess here you would draw something
            })
        })
    }
}

这是假设图形的原点是 (0,0) 并且 startAngle、outerRadius 和 innerRadius 是它们看起来的样子

【讨论】：