Uncaught TypeError: e.doDrilldown не является функцией - Highcharts

Question

Я использую 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) 

В другом файле, я загрузил реакционные диаграммы, но я даже не использую развертку.

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 основного.

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, это действительно помогло!

У меня также возникали проблемы при загрузке модулей высоких диаграмм несколько раз, и ваш обходной путь отсортировал их все!

Если другие в обществе нужно, вот мое расширение оболочки 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;