ChartJS 在React中的甜甜圈图中绘制圆形边缘

irtuqstp  于 12个月前  发布在  Chart.js
关注(0)|答案(1)|浏览(140)

如何在ReactJs中使用reactchartjs-2chart.js库绘制甜甜圈图。预期的图表如下所示。


的数据

jrcvhitl

jrcvhitl1#

我使用了这里的代码:Chartjs 3 doughnut chart rounded corners

<Doughnut
      ref={ charRef }
      className="doughnut-chart"
      data={ data }
      plugins={ [
        {
          id: 'drawСircles',
          afterUpdate(chart) {
            const arcs = chart.getDatasetMeta(0).data;

            arcs.forEach((arc) => {
              arc.round = {
                x: (chart.chartArea.left + chart.chartArea.right) / 2,
                y: (chart.chartArea.top + chart.chartArea.bottom) / 2,
                radius: (arc.outerRadius + arc.innerRadius) / 2,
                thickness: (arc.outerRadius - arc.innerRadius) / 2,
                backgroundColor: arc.options.backgroundColor,
              };
            });
          },
          afterDraw: (chart) => {
            const {
              ctx,
            } = chart;

            chart.getDatasetMeta(0).data.forEach((arc) => {
              const endAngle = Math.PI / 2 - arc.endAngle;

              ctx.save();
              ctx.translate(arc.round.x, arc.round.y);
              ctx.fillStyle = arc.options.backgroundColor;
              ctx.beginPath();
              ctx.arc(
                arc.round.radius * Math.sin(endAngle),
                arc.round.radius * Math.cos(endAngle),
                arc.round.thickness,

                0,

                2 * Math.PI,
              );
              ctx.closePath();
              ctx.fill();
              ctx.restore();
            });
          },
        },
      ] }
    />

字符集

相关问题