Highcharts drilldown не работает, когда модуль импортирован реагировать

Question

Я новый, чтобы реагировать/ES6. Я использую highcharts 4.2.4 с реакцией в ES6, создавая компонент высоких диаграмм, как указано в: http://www.highcharts.com/blog/192-use-highcharts-to-create-charts-in-react. Я использую ES6 и импортирую высокие диаграммы в качестве высокоуровневых диаграмм импорта из «highcharts», где highcharts - модуль npm, упомянутый в package.json.

Я просмотрел примеры расширенных диаграмм. Я взял карту дал пример развернутого: 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 
       ] 
      ] 
     }] 
    } 
} 

Однако я заметил, что хотя схема оказывается в порядке, нажав на любой колонке не запуская детализацию. Однако, если вместо того, чтобы импортировать 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

Как следует из статьи в блоге высокой четкости, вам необходимо загрузить дополнительные модули. Они посылают их в качестве реквизита, но вы можете сделать что-то вроде этого:

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; 

У меня была та же проблема, и это работает для меня.