导入模块时,Highcharts drilldown不工作

我是新来的反应/ ES6 . 我正在使用highcharts 4.2.4,通过创建一个如下所示的高图组件来响应ES6:http://www.highcharts.com/blog/192-use-highcharts-to-create-charts-in-react . 我使用ES6并从'highcharts'导入highcharts作为导入Highcharts,其中highcharts是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
' }, 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组件?

回答(1)

2 years ago

正如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;

我有同样的问题,这对我有用 .