未知の型エラー：e.doDrilldownは関数ではありません - Highcharts

Question

私は反応プロジェクトでハイチャートを使用しています。私は自分のモジュールにハイチャートをインポートしました。予想される動作は、ドリルダウンの複数のインスタンスを使用できることです。

例外が発生したe.doDrilldownは、ドリルダウンが実際に正常に機能するときには機能しません。 これは私のノード環境で起こります。そこでは、各グラフが独自のモジュールにあり、他のグラフが存在しないことがわかります。

ドリルダウンが既にインポートされているかどうかを確認するためのチェックを追加しようとしました。私はwebpackを使用して、モジュールが一度しかロードされないようにしようとしました。 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' 
     } 
    ] 
}, 

例外がスローさ：

私は現在、ここでの例に続き、この

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

... 
.... 

Drilldown(Highcharts); 

のように一つのファイルにそれを使用します

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に同じモジュールを何度も上書きするための保護は何もありません。これはここで問題になっているようです。

ハイチャートを安全にインポートするためのヘルパーファイルを作成できます。ヘルパーでは、ドリルダウンモジュールがすでに初期化されているかどうかを確認し、ハイチャートを再エクスポートすることができます。

の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本当に役立っていることmorganfree

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;