您的位置：首页 > 其它

highchart图表drilldown钻取功能及event点击事件添加--补充钻取多图显示（2）

2017-04-26 14:53 435 查看

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!-- <script src="js/jquery-3.1.1.min.js"></script> -->
<script src="js/highcharts.js"></script>
<script src="js/drilldown.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<script>

var result;

// Create the chart
Highcharts.chart('container', {
chart: {
type: 'bar',
events: {
drilldown: function (e) {

if (!e.seriesOptions) {
var chart = this,
drilldowns = result,
series = drilldowns[e.point.id];
console.info(drilldowns[e.point.id]);
console.info(drilldowns[2]);

// Show the loading label
chart.showLoading('Simulating Ajax ...');
setTimeout(function () {
chart.hideLoading();
if(series.length>1){//多图显示
chart.addSingleSeriesAsDrilldown(e.point, series[0]);
chart.addSingleSeriesAsDrilldown(e.point, series[1]);
chart.applyDrilldown();
}else{
chart.addSeriesAsDrilldown(e.point, series[0]);
}
}, 1000);
}
}
}
},
title: {
text: 'Async drilldown'
},
xAxis: {
type: 'category'
},

legend: {
enabled: true
},

plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '{point.name}: {point.percentage:.1f}%'
},
showInLegend: true
},
series: {
borderWidth: 0,
dataLabels: {
enabled: true
},
events:{
click:function(e){
if(e.point.toDetail){
result={
'22': [{
"center": ["200", null],
"id":'Fruitsid',
"name": 'Fruits',
"data": [
['Apples', 5],
['Oranges', 7],
['Bananas', 2]
],
"type": 'pie',
"size":300,
},
{
"id":'Carsid',
"name": 'Cars',
"type": 'pie',
"center": ["900", null],
"size":300,
"data": [
['Toyota', 1],
['Volkswagen', 2],
['Opel', 5]
]
}]
}
}else{
result={
'1': [{
id:'Animalsid',
name: 'Animalsn',
data:[{
id:'22',
name:'Cows',
toDetail:true,
y:2,
drilldown: true
},{
id:'2',
name:'Sheep',
y:3,
drilldown: true
}
]

}]
}
}
}
}
}

},

series: [{
name: 'Things1',
colorByPoint: true,
center: [200, null],
size:300,
data: [{
id:'1',
name: 'Animals',
y: 5,
drilldown: true
}, {
id:'2',
name: 'Fruits',
y: 2,
drilldown: true
}, {
id:'3',
name: 'Cars',
y: 4,
drilldown: true
}]
}
],

drilldown: {
series: [2]
}
});

</script>

结果图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： drilldown 钻取多图

相关文章推荐

新的分享

章节导航