使用 react-highcharts 的带有误差条的 Highcharts 图表

Question

我在画画

一张 Highcharts 图
在 React 应用程序中
有误差线

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

我的代码的一个简单示例如下所示：我基于主要的 Highcharts errorbar 示例在：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'

使用 react-highcharts 的带有误差条的 Highcharts 图表

Highcharts chart with error bars using react-highcharts

reactjs

highcharts

react-highcharts