如何在ReactJs中使用reactchartjs-2和chart.js库绘制甜甜圈图。预期的图表如下所示。
reactchartjs-2
chart.js
的数据
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(); }); }, }, ] } />
字符集
1条答案
按热度按时间jrcvhitl1#
我使用了这里的代码:Chartjs 3 doughnut chart rounded corners
字符集