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

polhcujo  于 2023-02-04  发布在  Chart.js
关注(0)|答案(1)|浏览(206)

我需要找到每个弧的具体x和y坐标。下面是一张照片,说明了我需要的坐标,根据每个弧的颜色编码。我需要每个弧元素的x和y坐标的两个点。

下面是一个示例弧对象(来自我自己的项目):

下面是一些示例代码:

  1. const data = {
  2. labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  3. datasets: [{
  4. label: 'Weekly Sales',
  5. data: [18, 12, 6, 9, 12, 3, 9],
  6. backgroundColor: [
  7. 'rgba(255, 26, 104, 0.2)',
  8. 'rgba(54, 162, 235, 0.2)',
  9. 'rgba(255, 206, 86, 0.2)',
  10. 'rgba(75, 192, 192, 0.2)',
  11. 'rgba(153, 102, 255, 0.2)',
  12. 'rgba(255, 159, 64, 0.2)',
  13. 'rgba(0, 0, 0, 0.2)'
  14. ],
  15. borderColor: [
  16. 'rgba(255, 26, 104, 1)',
  17. 'rgba(54, 162, 235, 1)',
  18. 'rgba(255, 206, 86, 1)',
  19. 'rgba(75, 192, 192, 1)',
  20. 'rgba(153, 102, 255, 1)',
  21. 'rgba(255, 159, 64, 1)',
  22. 'rgba(0, 0, 0, 1)'
  23. ],
  24. borderWidth: 1,
  25. cutout: '70%'
  26. }]
  27. };
  28. const donutArc = {
  29. id: 'donutArc',
  30. afterDraw: (chart) => {
  31. const { ctx, data: { datasets }, } = chart;
  32. datasets.forEach((dataset, i) =>{
  33. chart.getDatasetMeta(i).data.forEach((arc, j) => {
  34. console.log(arc)
  35. })
  36. })
  37. }
  38. }
  39. // config
  40. const config = {
  41. type: 'doughnut',
  42. data,
  43. options: {
  44. plugins: {
  45. legend: {
  46. display: false
  47. }
  48. }
  49. },
  50. plugins: [donutArc]
  51. };
  52. // render init block
  53. const myChart = new Chart(
  54. document.getElementById('myChart'),
  55. config
  56. );

完整的代码可以在这里找到:https://jsfiddle.net/tpLrxb53/.
我非常肯定这涉及到处理startAngleendAngle,但是我无法在这里的文档中理解它们:https://www.chartjs.org/docs/latest/api/classes/ArcElement.html
任何解释/解决方案都将受到高度赞赏

cgyqldqp

cgyqldqp1#

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

  1. const donutArc = {
  2. id: 'donutArc',
  3. afterDraw: (chart) => {
  4. const { ctx, data: { datasets }, } = chart;
  5. datasets.forEach((dataset, i) =>{
  6. chart.getDatasetMeta(i).data.forEach((arc, j) => {
  7. r1 = arc.innerRadius
  8. r2 = arc.outerRadius
  9. xinner = r1*Math.sin(arc.startAngle)
  10. yinner = r1*Math.cos(arc.startAngle)
  11. xouter = r2*Math.sin(arc.startAngle)
  12. youter = r2*Math.cos(arc.startAngle)
  13. // then I guess here you would draw something
  14. })
  15. })
  16. }
  17. }

这是假设图形的原点是(0,0),并且startAngleouterRadiusinnerRadius是它们看起来的样子

展开查看全部

相关问题