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

最新推荐文章于 2024-07-10 11:05:12 发布

菜头

最新推荐文章于 2024-07-10 11:05:12 发布

阅读量4.6k

点赞数 1

分类专栏： highchart 文章标签： drilldown 钻取多图

本文链接：https://blog.csdn.net/u011320740/article/details/70800565

版权

highchart 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!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>

结果图：

菜头

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
highchart图表drilldown钻取功能及event点击事件添加--补充钻取多图显示（2）

--> var result;// Create the chartHighcharts.chart('container', { chart: { type: 'bar', events: { drilldown: function (e) { if (!e.seriesO
复制链接

扫一扫