使用 react-highcharts 的带有误差线的 Highcharts 图表答案

【问题标题】：Highcharts chart with error bars using react-highcharts使用 react-highcharts 的带有误差线的 Highcharts 图表
【发布时间】：2017-06-13 17:25:06
【问题描述】：

我在画

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;

我觉得我已经尝试了所有方法，如果有人能提供任何帮助，我将不胜感激。

谢谢，

【问题讨论】：

您在构建项目时是否遇到任何错误？用于 highcharts 的 webpack 的默认路径为“highcharts/highcharts-more”。我复制粘贴了您的代码，它工作正常 - 出现错误栏。您如何渲染应用程序？你的代码中出现了多少次 HighchartsMore(React.Highcharts) 行？
嗨@morganfree，已经解决了！非常感谢。你想发帖作为答案，还是我应该？
太好了，我已经发布了答案

标签： reactjs highcharts react-highcharts

【解决方案1】：

highcharts-more 模块的默认路径是highcharts/highcharts-more'。所以导入应该是这样的：

import HighchartsMore from 'highcharts/highcharts-more'

【讨论】：