Question

有可能在highcharts的图表上呈现一个react组件吗？使用SVGRenderer的方法可以使用HTML，但如何将其用于react组件？

最小复制者/游乐场：https://jsfiddle.net/k07g9aj6/

const chart = Highcharts.chart('container', {
        series: [{
            data: [1, 2, 3, 4, 5]
    }]
})

class ReactButton extends React.Component {
        _onClick() {
            console.log("Clicked");
    }
    
    render() {
            return <button onClick={this._onClick}>ReactButton</button>;
    }
}

chart.renderer.button(<ReactButton />, 100, 200,).attr({
        zIndex: 3
}).add();

请注意，这里的按钮只是一个例子，我想知道是否可以在highcharts的图表上呈现任何复杂的react组件。我考虑的一种方法是将react元素转换为html并阅读here，但它对我不起作用，就像我期望的那样。

我也考虑过渲染svg元素，但是我不确定这是否是最好的解决方案，而且可能很难使其保持响应状态。

可以帮我吗？谢谢。

Answer 1

仅纯HTML允许通过renderer方法呈现。要使用React组件，您必须使用renderToString或renderToStaticMarkup方法将它们转换为HTML，或者使用门户网站并将组件呈现为已经存在的图表元素。

有用的线程： https://github.com/highcharts/highcharts-react/issues/23

文档： https://github.com/highcharts/highcharts-react#how-to-add-react-component-to-a-charts-element

在Highcharts上反应元素

1 个答案: