我希望使用highcharts-react-official官方库在页面上呈现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>
答案 0 :(得分:0)
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} />
)
}