highchart图表drilldown钻取功能及event点击事件添加(1)

最近做的一个需求是这样的,大类图表柱状图列出来,点击柱状图列出对应子类柱状图,后点击子类的柱状图后跳转到一个新页面列出两个饼状图

我是这么实现的:(部分代码demo,饼状图页面为detailChart.html,随便找了个例子顶替)

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

// Create the chart
Highcharts.chart('container', {
    chart: {
        type: 'bar',//纵型柱状图,column为横向柱状图
        events: {
            drilldown: function (e) {
                if (!e.seriesOptions) {
                    var chart = this,
                        drilldowns = {
                            'Animals': {
                            	id:'Animalsid',
                                name: 'Animals',
                                data: [
                                    ['Cows', 2],
                                    ['Sheep', 3]
                                ]
                            },
                            'Fruits': {
                            	id:'Fruitsid',
                                name: 'Fruits',
                                data: [
                                    ['Apples', 5],
                                    ['Oranges', 7],
                                    ['Bananas', 2]
                                ]
                            },
                            'Cars': {
                            	id:'Carsid',
                                name: 'Cars',
                                data: [
                                    ['Toyota', 1],
                                    ['Volkswagen', 2],
                                    ['Opel', 5]
                                ]
                            }
                        },
                        series = drilldowns[e.point.name];

                    // Show the loading label
                    chart.showLoading('Simulating Ajax ...');

                    setTimeout(function () {
                        chart.hideLoading();
                        chart.addSeriesAsDrilldown(e.point, series);
                    }, 1000);
                }

            }
            
        }
    },
    title: {
        text: 'Async drilldown'
    },
    xAxis: {
        type: 'category'
    },

    legend: {
        enabled: false
    },

    plotOptions: {
        series: {
            borderWidth: 0,
            dataLabels: {
                enabled: true
            },
            events:{
        	click:function(e){//点击事件
        		if(e.point.drilldown!=true){//如果不等于true表明是钻取到了最低层的图表
        			window.location.href='detailChart.html';
        		}
        		
        		}
       		 }	
        }
        
    },

    series: [{
        name: 'Things',
        colorByPoint: true,
        data: [{
            name: 'Animals',
            y: 5,
            drilldown: true
        }, {
            name: 'Fruits',
            y: 2,
            drilldown: true
        }, {
            name: 'Cars',
            y: 4,
            drilldown: true
        }]
    }],

    drilldown: {
        series: []
    }
});


	
</script>
结果图:




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值