<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'
}
}
}
},
}
});
下面是我的公眾號，大家可以關注一下，可以一起學習，一起進步：
