ChartJS 如何沿着海图圆环弧获取特定坐标

polhcujo 于 2023-02-04 发布在 Chart.js

关注(0)|答案(1)|浏览(134)

我需要找到每个弧的具体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
任何解释/解决方案都将受到高度赞赏

chart.js

来源：https://stackoverflow.com/questions/75321132/how-to-get-specific-co-ordinate-along-chartjs-donut-arc

1条答案

按热度按时间

cgyqldqp1#

你可以用下面的公式计算圆上的点
x =半径 *sin（Angular ），y =半径 *cos（Angular ）
所以我想在你的代码中你可以这样做

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是它们看起来的样子

赞(0）回复(0）举报 2023-02-04

我来回答

ChartJS 如何沿着海图圆环弧获取特定坐标

1条答案

相关问题

热门标签

最新问答