我正在使用HighchartsReact,并且正在努力在一个简单的制表符实现中正确呈现我的图表。每次更改选项卡时,图表都会“卡住”先前的渲染,并且永远不会刷新。 Here is the sample code。谢谢!
const chart1 = {
"title": { "text": "Chart 1" },
xAxis: { type:'datetime' },
"series": [
{ "name": "ONe line", "data": randData1 },
{ "name": "Another LIne", "data": randData2 }
],
chart: { events: { load: function(){} } }
}
const chart2 = {
"title": { "text": "Chart 2" },
"series": [
{ "name": "First Line", "data": randData3 },
{ "name": "Second Line", "data": randData4 }
],
chart: { events: { load: function(){} } }
}
const TheChart = ({ chartData }) => <HighchartsReact highcharts = { Highcharts } options = { chartData } />
const tabHeaders = [
'Chart One',
'Chart Two'
];
const tabContent = [
<TheChart chartData={ chart1 } />,
<TheChart chartData={ chart2 } />
];
const tabsProps = { tabHeaders, tabContent };
ReactDOM.render(<Tabs { ...tabsProps } />, document.getElementById('root'));
答案 0 :(得分:1)
请看以下示例:https://codesandbox.io/s/18836vk8oj-React不会切换同一类中的组件,只会更新第一个组件。为第二个组件创建新类是解决问题的方法之一:https://codepen.io/anon/pen/xmqvmX?editors=0010
const tabContent = [
<div>...</div>,
<TheChart chartData={ chart1 } />,
<TheChart2 chartData={ chart2 } />
];
使用图表更新组件会触发chart.update()
,例如,如果要更改xAxis.type
,则必须以两种配置对其进行更改:
chart.update({
series [...],
xAxis: {
type: 'datetime'
}
});
chart.update({
series [...],
xAxis: {
type: 'linear'
}
});
这里的另一个问题是用于性能的Highcharts突变系列配置对象:https://github.com/highcharts/highcharts/issues/9732-因此,您需要创建选项的深层副本或更改项目的结构。