时间戳

首页 > 解决方案 > 如何在 Highcharts React 中重绘使用 SVGRenderer 渲染的文本？

reactjs - 如何在 Highcharts React 中重绘使用 SVGRenderer 渲染的文本？

问题描述

我正在使用 SVGRenderer 在圆环图的中心绘制总值，如下所示：

在此处输入图像描述

执行此操作的代码如下所示（请在此处查看 CodeSandbox ）

export const PieChart = ({ title, totalLabel, pieSize, pieInnerSize, data }: PieChartProps) => {
    const chartRef = useRef(null);
    const [chartOptions, setChartOptions] = useState(initialOptions);

    useEffect(() => {
        // set options from props
        setChartOptions({...});

        // compute total
        const total = data.reduce((accumulator, currentValue) => accumulator + currentValue.y, 0);

        // render total
        const totalElement = chart.renderer.text(total, 0, 0).add();
        const totalElementBox = totalElement.getBBox();

        // Place total
        totalElement.translate(
            chart.plotLeft + (chart.plotWidth - totalElementBox.width) / 2,
            chart.plotTop + chart.plotHeight / 2
        );
        ...
    }, [title, totalLabel, pieSize, pieInnerSize, data]);

    return (
        <HighchartsReact
            highcharts={Highcharts}
            containerProps={{ style: { width: '100%', height: '100%' } }}
            options={chartOptions}
            ref={chartRef}
        />
    );
};

但是这种方法有两个问题：

  1. 调整图表大小时，总数保持在原来的位置 - 因此它不再位于饼图中的中心。

在此处输入图像描述

  1. 当图表数据发生变化时（使用表格），新的总数会覆盖现有的总数。

在此处输入图像描述

我该如何解决这些问题？使用 React，我希望图表在调整大小或更改道具时完全重新渲染。然而，使用 Highcharts React，图表似乎保持内部状态，不会被新的道具覆盖。

标签： reactjshighcharts

解决方案

对于这种情况，我可以建议两种选择：

  1. 每次重绘后使用events.render回调，销毁并渲染一个新标签：

演示：https ://jsfiddle.net/BlackLabel/ps97bxkg/

  1. events.render在每次重绘后使用回调来翻译这些标签：

演示：https ://jsfiddle.net/BlackLabel/6kwag80z/

每次图表重绘后都会触发渲染回调，因此在这种情况下完全有用 - 更多信息 API：https ://api.highcharts.com/highcharts/chart.events.render

推荐阅读