Highcharts Drilldown funktioniert nicht, wenn das Modul importiert wird.

Question

Ich bin neu zu reagieren/ES6. Ich verwende highcharts 4.2.4 mit react in ES6, indem ich eine Highcharts-Komponente wie in http://www.highcharts.com/blog/192-use-highcharts-to-create-charts-in-react angegeben erzeuge. Ich benutze ES6 und importiere Highcharts als Import Highcharts von 'highcharts', wobei highcharts ein npm-Modul ist, das in package.json erwähnt wird.

Ich ging durch die Highcharts Drilldown Beispiele. Ich nahm das Diagramm der Drill-Down Beispiel gegeben: http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/column-drilldown/ folgende chartOptions mit:

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

Allerdings habe ich bemerkt, dass, obwohl das Diagramm fein gemacht wird, auf jede Spalte klicken nicht die Drill-Down auslöst. Wenn jedoch statt Highcharts wie oben ist und die Linien importieren:

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

in der index.html, der Drill-Down geschieht in Ordnung. Ich habe sogar versucht, einschließlich der folgenden in der High-Charts Komponente:

Import {} Drill-Down von /highcharts/modules/drilldown.js'

aber keine Hilfe war. Können Sie mir bitte vorschlagen, wo ich falsch liege und wie die Highcharts-Komponente mit Drilldown ausgeführt wird?

Answer 1

Wie der Highcharts Blog-Artikel vorschlägt, müssen Sie optionale Module laden. Sie schicken sie als Requisiten in, aber Sie können etwas tun:

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; 

Ich hatte das gleiche Problem und das funktionierte für mich.