highcharts 在React中创建HighChart漏斗图的问题

ar7v8xwq 于 2023-10-20 发布在 Highcharts

关注(0)|答案(2)|浏览(133)

我期待在我的网页上使用highcharts-react-official库呈现一个highcharts漏斗图。然而，当我尝试这样做时，我得到了highchartsReact错误#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>

highcharts

来源：https://stackoverflow.com/questions/50971259/issue-with-creating-a-highchart-funnel-chart-in-react

2条答案

按热度按时间

hrysbysz1#

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} />
    )
}

赞(0）回复(0）举报 2023-10-20

wgeznvg72#

实际上我不得不做：

Funnel from 'highcharts/modules/funnel';
Funnel(Highcharts);

因为上面的评论给了我“找不到名字'ReactHighcharts'。你是说“海查特”吗ts（2552）”
但是我在这里发布的一个工作！

赞(0）回复(0）举报 2023-10-20

我来回答

highcharts 在React中创建HighChart漏斗图的问题

2条答案

相关问题

热门标签

最新问答