未捕获的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'
            }]
        }
    });
}

Answer 2

谢谢morganfree，这真的很有帮助！

在多次加载highcharts模块时，我也遇到了各种各样的问题，而且你的解决方法已经对它们进行了全部排序！

如果社区中的其他人需要它，这是我对morganfree的包装器的扩展（我刚添加了更多模块）：

import Highcharts           from 'highcharts';
import HighchartsDrilldown  from 'highcharts/modules/drilldown'
import HighchartsMore       from 'highcharts/highcharts-more'
import HighchartsNoData     from 'highcharts/modules/no-data-to-display'
import HighchartsFunnel     from 'highcharts/modules/funnel'
import HighchartsSolidGauge from 'highcharts/modules/solid-gauge'


// check if HighchartsDrilldown has already been loaded
if (!Highcharts.Chart.prototype.addSeriesAsDrilldown) {
    HighchartsDrilldown(Highcharts);
}

// check if HighchartsMore has already been loaded
if (!Highcharts.seriesTypes['gauge']) {
    HighchartsMore(Highcharts);
}

// check if HighchartsNoData has already been loaded
if (!Highcharts.Chart.prototype.hideNoData) {
    HighchartsNoData(Highcharts);
}

// check if HighchartsFunnel has already been loaded
if (!Highcharts.seriesTypes['pyramid']) {
   HighchartsFunnel(Highcharts);
}

// check if HighchartsSolidGauge has already been loaded
if (!Highcharts.seriesTypes['solidgauge']) {
   HighchartsSolidGauge(Highcharts);
}

export default Highcharts;

Answer 3

如果你现在仍然偶然发现这个问题，你仍然需要自己检查，但Highcharts计划将来检查包括在库中（检查#7729）

我把检查从上面延伸了一点。我添加了对可以加载的所有模块的检查，除了数据模块，我没有弄清楚如何在Highcharts上检查它。

    // check if HighchartsAnnotation has already been loaded
if (!Highcharts.Chart.prototype.addAnnotation) {}

// check if HighchartsBoost has already been loaded
if (!Highcharts.Chart.isChartSeriesBoosting) {}

// check if HighchartsDrilldown has already been loaded
if (!Highcharts.Chart.prototype.addSeriesAsDrilldown) {}

// check if HighchartsExporting has already been loaded
if (!Highcharts.Chart.prototype.exportChart) {}

// check if HighchartsMore has already been loaded
if (!Highcharts.seriesTypes['gauge']) {}
// you might want to check for all highcharts more modules
// e.g. 'arearange', 'areasplinerange', 'boxplot', 'bubble', 'columnrange', errorbar', 'gauge', 'solidgauge', 'polygon', 'waterfall'

// check if HighchartsNoData has already been loaded
if (!Highcharts.Chart.prototype.hideNoData) {}

// Data: Could not figure how to check if the Data modul has been loaded already

// check if HighchartsFunnel has already been loaded
if (!Highcharts.seriesTypes['funnel']) {}

// check if pyramids has already been loaded (if not need to load funnel)
if (!Highcharts.seriesTypes['pyramid']) {}

//  check if bellcurve has already been loaded (if not load historgram-bellcurve)
if (!Highcharts.seriesTypes['bellcurve']) {}

// check if histogram has already been loaded (if not load historgram-bellcurve)
if (!Highcharts.seriesTypes['histogram']) {}

// check if funnel has already been loaded
if (!Highcharts.seriesTypes['bullet']) {}

// check if Heatmaps already been loaded
if (!Highcharts.seriesTypes['heatmap']) {}

// check if Pareto already been loaded
if (!Highcharts.seriesTypes['pareto']) {}

// check if Sankey already been loaded
if (!Highcharts.seriesTypes['sankey']) {}

// check if SolidGauge has already been loaded
if (!Highcharts.seriesTypes['solidgauge']) {}

// check if Streamgraph has already been loaded
if (!Highcharts.seriesTypes['streamgraph']) {}

// check if Sunburst has already been loaded
if (!Highcharts.seriesTypes['sunburst']) {}

// check if Treemap has already been loaded
if (!Highcharts.seriesTypes['treemap']) {}

// check if Variablepie has already been loaded
if (!Highcharts.seriesTypes['variablepie']) {}

// check if Variwide has already been loaded
if (!Highcharts.seriesTypes['variwide']) {}

// check if Vector has already been loaded
if (!Highcharts.seriesTypes['vector']) {}

// check if Windbarb has already been loaded
if (!Highcharts.seriesTypes['windbarb']) {}

// check if Wordcloud has already been loaded
if (!Highcharts.seriesTypes['wordcloud']) {}

// check if Xrange has already been loaded
if (!Highcharts.seriesTypes['xrange']) {}