var chart = Highcharts.chart('container', {
chart: {
type: 'funnel',
marginRight: 100,
zoomType: 'xy'
},
title: {
text: '3年级2班开发人员统计图',
x: -50
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
crop : false,
overflow: 'none',
y: -30,
allowOverlap: true,
// 这里format是修改自己想要展示的数据,如果还需要别的数据,继续在后面追加
// 例如男同学:{point.x} <br>女同学:{point.y}
format: '<b>{point.name}</b><br> 开发人数: {point.v}',
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black',
softConnector: true
},
neckWidth: '0%',
neckHeight: '0%',
},
// 下面这个标签用来修改鼠标经过时展示的提示信息,不然会默认显示point.y,就变成全部都是1了
funnel: {
tooltip: {
pointFormat: '{series.name}: <b>{point.v}</b>'
}
}
},
legend: {
enabled: false
},
series: [{
name: '开发语言',
data: [
{
name: 'C++开发',
y: 1,// 这里的1都可以变,但是所有的数据都一样大,来保证高度都一样
x:35,// 如果不需要x,z那就不写,直接删除用v就可以了。
z:15,
v: 50
},{
name: 'JAVA开发',
y: 1,
x:60,
z:30,
v: 90
},{
name: 'PHP开发',
y: 1,
x:10,
z:20,
v: 30
}
]
}]
});
效果图如下