模块导入时Highcharts钻取不起作用反应

Question

我是新来的/ ES6。我使用highcharts 4.2.4，在ES6中做出反应，创建一个如图http://www.highcharts.com/blog/192-use-highcharts-to-create-charts-in-react中给出的highcharts组件。我正在使用ES6并导入highcharts作为来自'highcharts'的导入Highcharts，其中highcharts是package.json中提到的一个npm模块。

我经历了highcharts钻取的例子。我把图表中给出的明细例如：具有下列chartOptions http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/column-drilldown/：

{ 
    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 
       ] 
      ] 
     }] 
    } 
} 

不过，我注意到，虽然在图表呈现精细，点击任何列未触发下钻。但是，如果不是像上面那样导入Highcharts并包含以下行：

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

在index.html中，深入分析发生的很好。我甚至尝试，包括在高图表组件如下：从/highcharts/modules/drilldown.js'

进口{}向下钻取但无济于事。你能否建议我哪里出错，以及如何通过深入钻取来运行highcharts组件？

Answer 1

正如highcharts博客文章所建议的那样，您需要加载可选模块。他们把它们作为道具发送，但你可以这样做：

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; 

我有同样的问题，这对我工作。