HighCharts - 多級（3到4級）的餅圖分析

Question

我使用高圖表繪制餅圖，並且要求是當我們點擊圖表的一部分時，需要向下鑽取到其他級別。

我需要深入到3到4級。

例如，如果我在點擊它時為服裝創建圖表，則會深入查看包含服裝類別的圖表 - 男士服裝，女士服裝，兒童服裝等。（2級）

它在High Charts官方網站（ http://www.highcharts.com/demo/pie-drilldown/ ）上給出了良好的1級和示例

但我想要更深層次的深入鑽取，就像現在我點擊女性服裝一樣，它將深入到女性服裝類別，如包包，太陽鏡，手表，收入等。

誰能幫我嗎 ：（

Answer 1

不確定這是否對您有所幫助。 但我認為使用服務器端的數據實現這一點會更容易。 您可以更改餅圖的數據，如下所示，可以將您帶到任何級別。 您只需要保持標識以確定您所處的級別。

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'pie'
    },
    series: [{
        data: myInitialDataArray, // make sure each data point has an id
        point: {
            events: {
                click: function () {
                    $.post('/get/data/url/' + this.id, function(data) {
                        // you may need to format your data here
                        // Set the level here. e.g Level 1, 2 or 3 and then depending on that you can also change the url also or any other logic
                        chart.series[0].setData(data);
                    });
                }
            }
        }
    }]
});

Answer 2

我想你已經得到了答案。 但它可能對其他人有幫助。

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
<script src="http://code.highcharts.com/modules/drilldown.js"></script>

<div id="container" style="width: 700px; height: 400px; margin: 0 auto"></div>
<button id="pie">reset</button>

JavaScript部分

var chart;
$(document).ready(function() { /*begin chart render*/
var colors = Highcharts.getOptions().colors,
    categories = ['The Americas', 'Asia Pacific', 'Europe & Africa'],
    //name = 'Sectors',
    data = [{
        name: 'A-1',
        y: 55,
        color: colors[0],
        drilldown: {
            //begin alcohol
            name: 'A-1',
            categories: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
            data: [122252, 3516, 4036, 3557, 4021, 3624, 3847],
            color: colors[0],
            data: [{
                y: 33.06,
                name: 'A',
                drilldown: {
                    name: 'Budweiser',
                    categories: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
                    data: [10838, 11349, 11894, 11846, 11878, 11662, 11652, 11438, 11833, 12252],
                    color: colors[0]
                }},
            {
                y: 10.85,
                name: 'B',
                drilldown: {
                    name: 'Heinekein',
                    categories: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
                    data: [2266, 2396, 2431, 2380, 2357, 3516],
                    color: colors[0]
                }},
            {
                y: 7.35,
                name: 'C',
                drilldown: {
                    name: 'Jack Daniels',
                    categories: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
                    data: [1583, 1580, 1612, 4036],
                    color: colors[0]
                }},
            {
                y: 2.41,
                name: 'D',
                drilldown: {
                    name: 'Johnnie Walker',
                    categories: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
                    data: [1649, 1654, 1724, 3557],
                    color: colors[0]
                }},
            {
                y: 2.41,
                name: 'E',
                drilldown: {
                    name: 'Moet & Chandon',
                    categories: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
                    data: [2470, 2445, 2524, 2861, 2991, 3257, 3739, 3951, 3754, 4021],
                    color: colors[0]
                }},
            {
                y: 2.41,
                name: 'F',
                drilldown: {
                    name: 'Smirnoff',
                    categories: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
                    data: [2594, 2723, 5600, 2975, 3097, 3032, 3379, 3590, 7350, 3624],
                    color: colors[0]
                }},
            {
                y: 2.41,
                name: 'G',
                drilldown: {
                    name: 'Corona',
                    categories: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
                    data: [3847],
                    color: colors[0]
                }}],
        }},
    { 
        name: 'B-1',
        y: 11.94,
        color: colors[2],
        drilldown: {
            name: 'B',
            categories: ['A-2', 'B-2', 'C-2'],
            color: colors[2],
            data: [{
                y: 33.06,
                name: 'A',
                drilldown: {
                    name: 'A',
                    categories: ['A', 'B'],
                    data: [4444, 6666],
                    color: colors[3]
                },
                },
            {
                name: 'B',
                y: 10.85,
                drilldown: {
                    name: 'B',
                    categories: ['A', 'B'],
                    data: [22222, 6005],
                    color: colors[3]
                },
                },
            {
                name: 'C',
                y: 7.35,
                drilldown: {
                    name: 'C',
                    categories: ['2011'],
                    data: [3605],
                    color: colors[3]
                }}],
        }},
    ];



window.chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'pie',
        /* changes bar size */
        pointPadding: -0.3,
        borderWidth: 0,
        pointWidth: 10,
        shadow: false,
        backgroundColor: '#e2dfd3'
    },
    title: {
        text: 'Pie Test'
    },
    subtitle: {
        text: 'Pie Chart Triple Breakdown'
    },
    xAxis: {
        categories: categories
    },
    yAxis: {
        title: {
            text: 'Total Brand Value',
            categories: categories
        }
    },
    //drilldown plot
    plotOptions: {
        pie: {
            cursor: 'pointer',
            allowPointSelect: true,
            pointPadding: -0.3,
            borderWidth: 0,
            pointWidth: 15,
            shadow: false,
            point: {
                events: {
                    click: function() {
                        var chart = this.series.chart,
                            drilldown = this.drilldown;
                        if (drilldown) { // drill down
                            chart.setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color);
                        }
                    }
                }
            },
            dataLabels: {
                enabled: true,
                color: '#000',
                //label colors
                connectorColor: '#000',
                // connector label colors
                formatter: function() {
                    return '<b>' + this.point.name + '</b>: ' + this.y;

                }
            }
        }
    },
    //formatting over hover tooltip
    tooltip: {
        formatter: function() {
            var point = this.point,
                s = point.name + ':<b>' + this.y + '% market share</b><br/>';
            if (point.drilldown) {
                s = point.name + ':<b>' + this.y + '222</b><br/>';
                s += 'Click to view ' + point.name + ' versions';
            } else {
                s = point.name + ':<b>' + this.y + '333</b><br/>';
                s += 'Click to return to browser brands';
            }
            return s;
        }
    },
    credits: {
        enabled: false
    },
    series: [{
        name: name,
        data: data,
        /* changes bar size */
        pointPadding: -0.3,
        borderWidth: 0,
        pointWidth: 15,
        shadow: false,
        color: 'black' //Sectors icon
        }],
    exporting: {
        enabled: false
    }
}, function(chart){

    chart.upper = [];

    var up = false;

    chart.setChart = function(name, categories, data, color) {
        //chart.xAxis[0].setCategories(categories);
        if (name === true && chart.upper.length) {
            chart.series[0].remove();
            chart.addSeries( chart.upper.pop() );

            if( chart.upper.length === 0 ) {
                $("#pie").hide('up');

                up = false;
            }
            return true;
        }

        if (up === false) {
           $("#pie").show().bind('click', function(){ chart.setChart(true); });
            up = true;
        }

        chart.upper.push( chart.series[0].options );
        chart.series[0].remove();
        chart.addSeries({
            name: name,
            data: data,
            color: color || 'white'
            });
        }
    });
});