Uncaught : e.doDrilldown不是一个函数--高级图表

Question

我在我的反应项目中使用了高级图表。我在我的模块中导入了高级图表。预期的行为是能够使用多个钻取实例。

当钻取工作正常时，引发的异常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高级图表，但我甚至没有使用钻取。

Answer 1

错误发生的原因是Drilldown(Highcharts)被多次调用。高级图表模块的工作方式是修改高海图对象。对于多次覆盖同一个模块的高级图表，没有任何形式的保护--这似乎就是这里的问题。

您可以编写一个帮助文件，用于以安全的方式导入高级图表。在帮助程序中，您可以检查钻取模块是否已经初始化并重新导出高图。

src/Highcharts.js

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

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

export default 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包装器的扩展(我刚刚添加了更多模块)：

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

如果您现在仍然遇到这个问题，您仍然需要自己检查它，但是高级图表计划在将来将检查包含到库中(请检查#7729)。

我把支票从上面再延长了一点。我添加了所有可以加载的模块的检查，除了数据模块之外，我不知道如何在高级图表上检查它。

    // 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']) {}