使用react-highcharts

Question

我正在尝试绘制

• 一张Highcharts图
• 在React应用
中
• 有错误栏

我可以使用ReactHighcharts轻松绘制一个普通的图表，并在我的React状态发生变化时让它更新。但是，添加错误栏似乎根本不起作用。

我的代码的一个简单示例如下所示：我将它基于主要的Highcharts错误栏示例：http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/error-bar/

如果我不包含highcharts-more库，则会收到错误"The requested series type does not exist"。但即使我确实包含highcharts-more导入，错误栏也不会呈现。我得到的图表没有任何误差条，如附图所示。

import React, { Component } from 'react';

import ReactHighcharts from 'react-highcharts';

import HighchartsMore from 'highcharts-more'; // Without including these two lines, I get https://www.highcharts.com/errors/17
HighchartsMore(ReactHighcharts.Highcharts);   // "The requested series type does not exist"

const config = {
    title: {
        text: 'Temperature vs Rainfall'
    },
    xAxis: [{
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    }],
    series: [{
        name: 'Rainfall',
        type: 'column',
        data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }, {
        name: 'Rainfall error',
        type: 'errorbar',
        data: [[48, 51], [68, 73], [92, 110], [128, 136], [140, 150], [171, 179], [135, 143], [142, 149], [204, 220], [189, 199], [95, 110], [52, 56]]
    }]
};

class ErrorBarExample extends Component {
  render() {
    const chartData = config;
    return (
      <div>
        <ReactHighcharts config={chartData} />
      </div>
    );
  }
}

export default ErrorBarExample;

我觉得我已经尝试了所有的东西，我真的很感激任何人都可以提供帮助。

谢谢，

Answer 1

highcharts-more模块的默认路径为highcharts/highcharts-more'。因此导入应如下所示：

import HighchartsMore from 'highcharts/highcharts-more'