未捕获的TypeError:e.doDrilldown不是函数 - Highcharts

Question

我在反应项目中使用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'
            }]
        }
    });
}