引用错误:在react中使用棒棒糖系列时,没有定义Highcharts

zxlwwiss  于 9个月前  发布在  Highcharts
关注(0)|答案(2)|浏览(90)

在react中使用highcharts-react-official模块呈现棒棒糖图时看到以下错误。如果我将系列类型更改为line,则渲染效果良好
ReferenceError: Highcharts is not defined
示例代码:

import Highcharts, {Options} from 'highcharts'
import HighchartsReact from 'highcharts-react-official'

const options: Options = {
  chart: {
    type: 'lollipop'
  },
  series: [{
    name: 'Example Series',
    type: 'lollipop',
    data: [10, 20, 50, 30, 100]
  }]
}

const ExampleComponent = () => (
  <HighchartsReact
    highcharts={Highcharts}
    options={options}
  />
)
6tqwzwtp

6tqwzwtp1#

请记住正确加载必要的模块:https://github.com/highcharts/highcharts-react#how-to-add-a-module
你可以在这里找到一个简单的演示:https://stackblitz.com/edit/react-hnwmgd?file=index.js

import React from "react";
import { render } from "react-dom";
// Import Highcharts
import Highcharts from "highcharts/highstock";
import HighchartsReact from "highcharts-react-official";
import HC_more from "highcharts/highcharts-more";
import highchartsDumbbell from "highcharts/modules/dumbbell";
import highchartsLollipop from "highcharts/modules/lollipop";

// init the module
highchartsDumbbell(Highcharts);
highchartsLollipop(Highcharts);
HC_more(Highcharts);
tuwxkamq

tuwxkamq2#

如果你使用的是Typescript,初始化应该直接在React组件中完成。
如果在组件外部初始化模块,则更新应用后可能会遇到TypeError。

import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";
import dumbbell from "highcharts/modules/dumbbell";
import lollipop from "highcharts/modules/lollipop";

const options = {...};

const ExampleComponent = () => {
    // module initialization
    dumbbell(Highcharts);
    lollipop(Highcharts);

    
    return <HighchartsReact highcharts={Highcharts} options={options} />;
}

相关问题