モジュールをインポートすると、ハイチャートのドリルダウンが機能しません。

Question

私は/ ES6に反応するのが新しいです。私はハイチャートを使用しています。4.2.4。リアクションをES6で作成するには、http://www.highcharts.com/blog/192-use-highcharts-to-create-charts-in-reactのハイチャートコンポーネントを作成します。私はES6を使用し、highchartsをimport.cとしてハイチャートをインポートしています。ハイチャートは、package.jsonで言及されているnpmモジュールです。

私はハイチャートのドリルダウンの例を調べました。私は、ドリルダウンの例与えられたチャートを取っ：http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/column-drilldown/は以下chartOptionsを持つ：

{ 
    chart: { 
     type: 'column' 
    }, 
    title: { 
     text: 'Browser market shares. January, 2015 to May, 2015' 
    }, 
    subtitle: { 
     text: 'Click the columns to view versions.' 
    }, 
    xAxis: { 
     type: 'category' 
    }, 
    yAxis: { 
     title: { 
      text: 'Total percent market share' 
     } 

    }, 
    legend: { 
     enabled: false 
    }, 
    plotOptions: { 
     series: { 
      borderWidth: 0, 
      dataLabels: { 
       enabled: true, 
       format: '{point.y:.1f}%' 
      } 
     } 
    }, 

    tooltip: { 
     headerFormat: '<span style="font-size:11px">{series.name}</span><br>', 
     pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>' 
    }, 

    series: [{ 
     name: 'Brands', 
     colorByPoint: true, 
     data: [{ 
      name: 'Microsoft Internet Explorer', 
      y: 56.33, 
      drilldown: 'Microsoft Internet Explorer' 
     }, { 
      name: 'Chrome', 
      y: 24.03, 
      drilldown: 'Chrome' 
     }, { 
      name: 'Firefox', 
      y: 10.38, 
      drilldown: 'Firefox' 
     }, { 
      name: 'Safari', 
      y: 4.77, 
      drilldown: 'Safari' 
     }, { 
      name: 'Opera', 
      y: 0.91, 
      drilldown: 'Opera' 
     }, { 
      name: 'Proprietary or Undetectable', 
      y: 0.2, 
      drilldown: null 
     }] 
    }], 
    drilldown: { 
     series: [{ 
      name: 'Microsoft Internet Explorer', 
      id: 'Microsoft Internet Explorer', 
      data: [ 
       [ 
        'v11.0', 
        24.13 
       ], 
       [ 
        'v8.0', 
        17.2 
       ], 
       [ 
        'v9.0', 
        8.11 
       ], 
       [ 
        'v10.0', 
        5.33 
       ], 
       [ 
        'v6.0', 
        1.06 
       ], 
       [ 
        'v7.0', 
        0.5 
       ] 
      ] 
     }, { 
      name: 'Chrome', 
      id: 'Chrome', 
      data: [ 
       [ 
        'v40.0', 
        5 
       ], 
       [ 
        'v41.0', 
        4.32 
       ], 
       [ 
        'v42.0', 
        3.68 
       ], 
       [ 
        'v39.0', 
        2.96 
       ], 
       [ 
        'v36.0', 
        2.53 
       ], 
       [ 
        'v43.0', 
        1.45 
       ], 
       [ 
        'v31.0', 
        1.24 
       ], 
       [ 
        'v35.0', 
        0.85 
       ], 
       [ 
        'v38.0', 
        0.6 
       ], 
       [ 
        'v32.0', 
        0.55 
       ], 
       [ 
        'v37.0', 
        0.38 
       ], 
       [ 
        'v33.0', 
        0.19 
       ], 
       [ 
        'v34.0', 
        0.14 
       ], 
       [ 
        'v30.0', 
        0.14 
       ] 
      ] 
     }, { 
      name: 'Firefox', 
      id: 'Firefox', 
      data: [ 
       [ 
        'v35', 
        2.76 
       ], 
       [ 
        'v36', 
        2.32 
       ], 
       [ 
        'v37', 
        2.31 
       ], 
       [ 
        'v34', 
        1.27 
       ], 
       [ 
        'v38', 
        1.02 
       ], 
       [ 
        'v31', 
        0.33 
       ], 
       [ 
        'v33', 
        0.22 
       ], 
       [ 
        'v32', 
        0.15 
       ] 
      ] 
     }, { 
      name: 'Safari', 
      id: 'Safari', 
      data: [ 
       [ 
        'v8.0', 
        2.56 
       ], 
       [ 
        'v7.1', 
        0.77 
       ], 
       [ 
        'v5.1', 
        0.42 
       ], 
       [ 
        'v5.0', 
        0.3 
       ], 
       [ 
        'v6.1', 
        0.29 
       ], 
       [ 
        'v7.0', 
        0.26 
       ], 
       [ 
        'v6.2', 
        0.17 
       ] 
      ] 
     }, { 
      name: 'Opera', 
      id: 'Opera', 
      data: [ 
       [ 
        'v12.x', 
        0.34 
       ], 
       [ 
        'v28', 
        0.24 
       ], 
       [ 
        'v27', 
        0.17 
       ], 
       [ 
        'v29', 
        0.16 
       ] 
      ] 
     }] 
    } 
} 

は、しかし、私はチャートが任意の列をクリックすると、微細化されているがドリルダウンをトリガされていないことに気づきました。ただし、上記のハイチャートをインポートし、index.htmlに

<script src="http://code.highcharts.com/highcharts.js"></script> 
<script src="http://code.highcharts.com/modules/drilldown.js"></script> 

を含める代わりに、ドリルダウンがうまくいきます。私も高いチャートコンポーネントで次のような試み：/highcharts/modules/drilldown.js'

から

インポート{ドリルダウン}しかし、誰の助けでした。私が間違っているところを教えてください。ドリルダウンでhighchartsコンポーネントを実行する方法を教えてください。

Answer 1

ハイチャートの記事では、オプションのモジュールを読み込む必要があります。彼らは小道具としてそれらを送っていますが、このような何かを行うことができます。

import React from 'react'; 
import { findDOMNode } from 'react-dom'; 
import Highcharts from 'highcharts'; 
import drilldown from 'highcharts-drilldown'; 

const Highchart = React.createClass({ 
    componentDidMount() { 
    // load modules 
    drilldown(Highcharts); 

    this.chart = new Highcharts['Chart'](
     findDOMNode(this), 
     this.props.options 
    ); 
    }, 

    componentWillUnmount: function() { 
    this.chart.destroy(); 
    }, 

    render() { 
    return (
     <div className="in-highchart"></div> 
    ) 
    } 
}); 

export default Highchart; 

私は同じ問題を抱えていた、これは私のために働きました。