在反应中创建高图漏斗图的问题答案

【问题标题】：Issue with creating a highchart funnel chart in react在反应中创建高图漏斗图的问题
【发布时间】：2019-11-12 14:52:40
【问题描述】：

我希望使用 highcharts-react-official 库在我的页面上呈现 highcharts 漏斗图。但是，当我尝试这样做时，我得到了 highcharts 反应错误 #17。从文档看来，我还必须导入“highcharts/modules/funnel.js”。我相信这很简单，但我对如何在我的组件中执行此操作有点迷茫。下面是我目前正在玩的代码。配置似乎在 codepen 编辑器中工作正常

import { render } from 'react-dom';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import React, { Component } from 'react';

const funnelChartOptions = {
    chart: {
        type: 'funnel',
        spacing: [10, 10, 15, 10]
    },
    backgroundColor: 'transparent',
    title: {
        text: 'Sales funnel'
    },
      funnel: {
    showInLegend: true
  },
      tooltip: {

      pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>',
      shadow: true,
      backgroundColor: 'rgba(22,50,92,1)',
      borderColor: 'rgba(22,50,92,1)',
      borderRadius: 2,
      style: {
        color: 'white'
      }
  },
    plotOptions: {
        series: {
            dataLabels: {
                enabled: false
            },
            center: ['40%', '50%'],
            neckWidth: '30%',
            neckHeight: '0%',
            width: '50%'
        }
    },
      legend:{
   		 align: 'right',
    verticalAlign: 'top',
    floating: true,
    layout: 'vertical',
    x: 0,
    y: 100,
    margin: 1
  },
    series: [{
        name: 'Unique users',
        data: [
            ['Website visits', 15654],
            ['Downloads', 4064],
            ['Requested price list', 1987],
            ['Invoice sent', 976],
            ['Finalized', 846]
        ],
        showInLegend: true
    }]
};

export default class FunnelChart extends Component {

render(){
    return(
    <div>
    <HighchartsReact
    highcharts={Highcharts}
    options={funnelChartOptions} />
    </div>);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

【问题讨论】：

文档 (github.com/highcharts/highcharts-react) 的 Highmaps 图表 部分以地图模块为例进行了说明。正如它所说：// the same allpies to any other Highcharts module
谢谢，真不敢相信我错过了这个！
@JonSwanson 您找到的解决方案是什么？

标签： reactjs highcharts react-highcharts

【解决方案1】：

import ReactHighcharts from 'react-highcharts';
import Funnel from 'highcharts/modules/funnel';
Funnel(ReactHighcharts.Highcharts);


let funnelData = {
    chart: {
        type: 'funnel'
    },
    title: {
        text: 'Sales funnel'
    },
    plotOptions: {
        series: {
            dataLabels: {
                enabled: true,
                format: '<b>{point.name}</b> ({point.y:,.0f})',
                softConnector: true
            },
            center: ['40%', '50%'],
            neckWidth: '30%',
            neckHeight: '25%',
            width: '80%'
        }
    },
    legend: {
        enabled: false
    },
    series: [{
        name: 'Unique users',
        data: [
            ['Website visits', 15654],
            ['Downloads', 4064],
            ['Requested price list', 1987],
            ['Invoice sent', 976],
            ['Finalized', 846]
        ]
    }],
    responsive: {
        rules: [{
            condition: {
                maxWidth: 500
            },
            chartOptions: {
                plotOptions: {
                    series: {
                        dataLabels: {
                            inside: true
                        },
                        center: ['50%', '50%'],
                        width: '100%'
                    }
                }
            }
        }]
    }}

render(){
     return(
      <ReactHighcharts config={funnelData} />
    )
}

【讨论】：