问题:

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'));

回答1:

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 } /> ];

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'     } });

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.

Live demo: https://codepen.io/anon/pen/YdZmMO?editors=0010

转载请标明出处:HighchartsReact does not render properly in custom Tabs

文章来源: HighchartsReact does not render properly in custom Tabs

标签

chart