Question

我试图按照https://github.com/highcharts/highcharts指南的反应来获得高品质的反应，到目前为止我已经提出了以下内容，我导入了前两行，导出在最后一次导入下面。在我的渲染功能中，我有我想要的选项，但是我收到了这个错误。有没有我错过的东西？

import Highcharts from 'highcharts/highstock';
import Exporting from 'highcharts/modules/exporting';
Exporting(Highcharts);

        <div className="chart">
          Highcharts.chart('container', {
              chart: {
                backgroundColor: '#FFFFFF',
                height: 400
            },

            title: {
                text: 'Bitcoin Chart'
            },

            scrollbar: {
              enabled: false
            },

            rangeSelector: {
                selected: 1
            },

            series: [{
                name: 'AAPL Stock Price',
                color: 'black',
                data: this.props.data.all_price_values,
                type: 'area',
                threshold: null,
                tooltip: {
                    valueDecimals: 2
                }
            }],
            plotOptions: {
            series: {
                fillColor: {
                    linearGradient: [0, 0, 0, 700],
                    stops: [
                        [0, '#FF9900'],
                        [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                    ]
                }
            }
            },

            responsive: {
                rules: [{
                    condition: {
                        maxWidth: 500
                    },
                    chartOptions: {
                        chart: {
                            height: 300
                        },
                        subtitle: {
                            text: null
                        },
                        navigator: {
                            enabled: false
                        }
                    }
                }]
            }
          });
        </div>

我正在尝试使用我的反应应用程序http://jsfiddle.net/votfqnur/6/

来实现这一点

Answer 1

https://github.com/whawker/react-jsx-highcharts

此版本有效，如下所述：

import { withHighcharts, HighchartsChart, Chart, /* etc... */ } from 'react-jsx-highcharts';
import Highcharts from 'highcharts';

const MyChart = () => (
  <HighchartsChart>
    <Chart />
    // etc
  </HighchartsChart>
);

export default withHighcharts(MyChart, Highcharts); // Injecting the Highcharts object

Answer 2

您不能直接在<div className="chart"></div>中编写js代码。至少，您需要使用{}包装js代码，例如<div className="chart">{JSON.stringify({a:1})}</div>

您可以在componentDidMount中呈现图表，这是我的简单演示： https://codesandbox.io/s/l7xol9n887

Highcharts / Highstock和React，意外令牌的错误

2 个答案: