highcharts下鉆功能

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src='jquery-1.10.2.min.js'></script>
    <script src="echarts.min.js"></script>
    <script src="highcharts.js"></script>
    <script src="drilldown.js"></script>
</head>
<body>
    <!--  准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 700px;height:500px;"></div>
    <script type="text/javascript">
// Create the chart
Highcharts.chart('main', {
    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>
</body>
</html>
轉載收藏
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011320740/article/details/70800565
highcharts下鉆功能

highcharts下鉆功能

相关文章
