highcharts的多级下钻以及图形形态转换

<script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>

 

Highcharts.setOptions({
lang: {
drillUpText: '<< 返回 {series.name}'
}
});
var Dieren =[    //必须 与series中data中的 id 要一致 
{
name: "未提案",

type:"column",
data: [
{
name: "城一",
id:'Branch1',
color:'gray',
y: 500,
drilldown: '城1'
},
{
name: "城二",
id:'Branch1',
color:'gray',
y: 200,
drilldown: '城2'
}]
},
{
name: "已提案",

type:"column",
data: [
{
id:'new1',
name: "城一",
y: 740,
drilldown: 'year1'
},
{
id:'new1',
name: "城二",
y: 858,
drilldown: 'year2'
}]
}
];
var Fruit = [{
id: 'year1',
name: "未提",
type:'column',
color:'red',
data: [
['问题1',2],['问题2',3],['问题3',4]
],
},
{
id: 'year2',
name: "已提",
type:'column',
color:'green',
data:[
['问题1',1],['问题2',3],['问题3',4]
],
}
]
var Branch1 =[ {
id: '城1',
name: "未提",
type:'column',
color:'red',
data: [
['问题1',2],['问题2',3],['问题3',4]
],
},
{
id: '城2',
name: "已提",
type:'column',
color:'green',
data:[
['问题1',5],['问题2',3],['问题3',4]
],
}
]
var new1 =[ {
id: '城1',
name: "未提",
type:'column',
color:'red',
data: [
['问题1',2],['问题2',3],['问题3',4]
],
},
{
id: '城2',
name: "已提",
type:'column',
color:'green',
data:[
['问题1',1],['问题2',3],['问题3',4]
],
}
]

// Create the chart
Highcharts.chart('container', {
chart: {
type: 'pie',
events:{//设置下钻的重要部分 将数据更新到图中
drilldown:function(e){
for(var i = 0; i < eval(e.point.id).length; i ++){
this.addSingleSeriesAsDrilldown(e.point, eval(e.point.id)[i]);
}
this.applyDrilldown();
}
}
},
title: {
text: '室外问题'
},
xAxis: {
type: 'category'
},

legend: {
enabled: false
},

plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true
}
},
column:{
stacking:'normal'
}
},

series: [{
name: '总问题',
colorByPoint: true,
data: [{
id:'Dieren',  //对应下钻数据的数组名称
name: '未提案',
y: 5,
drilldown: 'animals'
}, {
id:'Fruit',
name: '已提案',
y: 2,
drilldown: 'fruits'
}]
}],
drilldown: {
drillUpButton: {
relativeTo: 'spacingBox',
position: {
y: 0,
x: 0
},
theme: {
fill: 'white',
'stroke-width': 1,
stroke: 'silver',
r: 0,
states: {
hover: {
fill: '#a4edba'
},
select: {
stroke: '#039',
fill: '#a4edba'
}
}
}

},
}
});

 

下面是我的公众号，大家可以关注一下，可以一起学习，一起进步：