HighchartsReact无法在自定义选项卡中正确呈现 [英] HighchartsReact does not render properly in custom Tabs
问题描述
我正在使用 HighchartsReact ,我正在努力将图表正确显示在简单的标签实现.每次更改选项卡时,图表都会卡死"在以前的渲染中,并且永远不会刷新. 这是示例代码.谢谢!
I'm using HighchartsReact and I'm struggling to render my charts properly inside a simple tab implementation. Every time I change tabs, the charts get "stuck" on the previous rendering and never refresh. Here is the sample code. Thanks!
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'));
推荐答案
请查看以下示例: https ://codesandbox.io/s/18836vk8oj -React不会切换同一类的组件,只会更新第一个组件.为第二个组件创建新类是解决问题的一种方法: https://codepen.io/anon/pen/xmqvmX?editors=0010
Please take a look at this example: https://codesandbox.io/s/18836vk8oj - React does not switch components from the same class, the first component is only updated. Creating a new class for the second component is one of the ways to solve the problem: https://codepen.io/anon/pen/xmqvmX?editors=0010
const tabContent = [
<div>...</div>,
<TheChart chartData={ chart1 } />,
<TheChart2 chartData={ chart2 } />
];
使用图表更新组件会触发chart.update()
,例如,如果要更改xAxis.type
,则必须以两种配置对其进行更改:
Updating component with a chart fires chart.update()
, so for example if you want to change xAxis.type
you must change it in two configurations:
chart.update({
series [...],
xAxis: {
type: 'datetime'
}
});
chart.update({
series [...],
xAxis: {
type: 'linear'
}
});
这里的另一个问题是,用于性能的Highcharts会改变系列配置对象: https://github.com com/highcharts/highcharts/issues/9732 -因此,您需要创建选项的深层副本或更改项目的结构.
Another issue here is that Highcharts for performance mutate series config object: https://github.com/highcharts/highcharts/issues/9732 - so you need create a deep copy of your options or change the structure of the project.
实时演示: https://codepen.io/anon/pen/YdZmMO?编辑者= 0010
这篇关于HighchartsReact无法在自定义选项卡中正确呈现的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!