javascript - 未捕获的类型错误 : e. doDrilldown 不是函数 - Highcharts

Question

我在我的 React 项目中使用了 highcharts。我在我的模块中导入了 highcharts。预期的行为是能够使用多个向下钻取实例。

当向下钻取实际工作正常时，引发的异常 e.doDrilldown 不是函数。 这发生在我的节点环境中，其中每个图都在自己的模块中，并且不知道其他图的存在。

我尝试添加检查以查看是否已导入向下钻取。我尝试使用 webpack 来确保模块只加载一次。我目前在这样的一个文件中使用它

import Drilldown from 'highcharts/modules/drilldown';
import Highcharts from 'highcharts/highmaps.src.js';

...
....

Drilldown(Highcharts);

按照此处的示例:http://www.highcharts.com/blog/192-use-highcharts-to-create-charts-in-react

类似的github问题: https://github.com/highcharts/highcharts/issues/6086

Webpack 打包器:

module: {
    loaders: [
        {
            test: /\.js|jsx$/,
            loader: 'babel-loader',
            exclude: /(node_modules)/
        },
        {
            test: /\.json$/,
            loader: 'json-loader'
        }
    ]
},

异常抛出:

drilldown.js:25 Uncaught TypeError: e.doDrilldown is not a function
    at object.<anonymous> (drilldown.js:25)
    at H.fireEvent (highmaps.src.js:1801)
    at object.firePointEvent (highmaps.src.js:16012)
    at H.Pointer.onContainerClick (highmaps.src.js:12641)
    at HTMLDivElement.container.onclick (highmaps.src.js:12675)

在另一个文件中，我加载了 react-highcharts，但我什至没有使用 drilldown。

Answer 1

出现错误的原因是多次调用了Drilldown(Highcharts)。 Highcharts 模块以修改 Highcharts 对象的方式工作。对于多次使用同一模块覆盖 Highcharts 没有任何类型的保护 - 这似乎就是这里的问题。

您可以编写帮助文件以安全的方式导入 Highcharts。在帮助程序中，您可以检查下钻模块是否已初始化并重新导出 Highcharts。

src/Highcharts.js

import Highcharts from 'highcharts';
import Drilldown from 'highcharts/modules/drilldown';

if (!Highcharts.Chart.prototype.addSeriesAsDrilldown) {
    Drilldown(Highcharts);
}

export default Highcharts;

现在，您应该使用帮助文件来导入 Highcharts，这样您就不会多次覆盖 Highcharts main。

src/Chart.js

import Highcharts from './Highcharts.js';

export default function () {
    Highcharts.chart('container', {
        series: [{
            type: 'column',
            data: [{
                y: 2,
                drilldown: 'd1'
            }]
        }],

        drilldown: {
            series: [{
                type: 'column',
                data: [1,2,3,4],
                id: 'd1'
            }]
        }
    });
}