时间戳

首页 > 解决方案 > HighchartsReact 无法在自定义选项卡中正确呈现

reactjs - HighchartsReact 无法在自定义选项卡中正确呈现

问题描述

我正在使用HighchartsReact，我正在努力在一个简单的选项卡实现中正确呈现我的图表。每次我更改选项卡时，图表都会“卡在”之前的渲染中并且永远不会刷新。 这是示例代码。谢谢！

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

标签： reactjshighcharts

解决方案

请看一下这个例子：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 for performance mutate series config object: https://github.com/highcharts/highcharts/issues/9732 - 所以你需要创建你的选项的深层副本或更改项目的结构。

现场演示：https ://codepen.io/anon/pen/YdZmMO?editors=0010

推荐阅读