Question

Plz，请参阅此jsfiddle：https://jsfiddle.net/surya_swami/zx9dy3uj/39/ 这是带有向下钻取的折线图，在这里，我必须按月显示区域和区域级别的生产率。即七月，八月，九月
在该区域1中有2个区域，区域2中有3个区域，因此，当我单击任何区域时，我都希望在向下钻取时显示相同的视图，我可以看到其下的所有区域（按月），与主页视图中显示的相同。

drilldown: {  series: [{id:"z1",name: "Region-1",
                     data: [{ name : "July",y: 10},
                            { name : "Aug",y: 21},
                            { name : "Sept",y: 15}]
                     },
                     {id:"z1",name: "Region-2",
                      data: [{ name : "July",y: 12},
                             { name : "Aug",y: 9},
                             { name : "Sept",y: 25}]
                     },
                     { id:'z2',name:'Region-3',
                       data : [{name:'July',y:23},
                               {name:'Aug',y:41},
                               {name:'Sept',y:31}]
                     },
                     { id:'z2',name:'Region-4',
                       data : [{name:'July',y:33},
                               {name:'Aug',y:23},
                               {name:'Sept',y:12}]
                     },
                     { id:'z2',name:'Region-5',
                       data : [{name:'July',y:31},
                               {name:'Aug',y:39},
                               {name:'Sept',y:19}]
                     }
                    ]
        }

我认为在传递相同的ID时会遇到一些问题。

Answer 1

这可能是您要寻找的： http://jsfiddle.net/49q18Lp3/1142

$(function () {

// Create the chart
$('#container').highcharts({
    chart: {
        type: 'line',
        events: {
            drilldown: function (e) {
                if (!e.seriesOptions) {
                    var chart = this,
                        drilldowns = {
                            'June': {
                                name: 'Region1',
                                data: [
                                    ['June', 2],
                                    ['July', 3],
                                    ['August', 4]
                                ]
                            },
                                'June2': {
                                name: 'Region1',
                                color: Highcharts.getOptions().colors[1],
                                data: [
                                    ['June', 22],
                                    ['July', 13],
                                    ['August', 13]
                                ]
                            },
                                'July': {
                                name: 'Region1',
                                color: Highcharts.getOptions().colors[1],
                                data: [
                                    ['June', 22],
                                    ['July', 13],
                                    ['August', 13]
                                ]
                            },
                                'July2': {
                                name: 'Region1',
                                color: Highcharts.getOptions().colors[1],
                                data: [
                                    ['June', 22],
                                    ['July', 13],
                                    ['August', 13]
                                ]
                            }
                        },
                        series = [drilldowns[e.point.name], drilldowns[e.point.name + '2']];

                    chart.addSingleSeriesAsDrilldown(e.point, series[0]);
                    chart.addSingleSeriesAsDrilldown(e.point, series[1]);
                    chart.applyDrilldown();
                }

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

    legend: {
        enabled: false
    },

    plotOptions: {
        series: {
            stacking: 'normal',
            borderWidth: 0,
            dataLabels: {
                enabled: true
            }
        }
    },

    series: [{
        name: 'Zone1',
        data: [{
            name: 'June',
            y: 5,
            drilldown: true
        }, {
            name: 'July',
            y: 2
        }, {
            name: 'August',
            y: 4
        }]
    },{
        name: 'Zone2',
        data: [{
            name: 'June',
            y: 5
        }, {
            name: 'July',
            y: 2,
            drilldown:true
        }, {
            name: 'August',
            y: 4
        }]
    }],

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

在HighChart中输入细目，输入行

1 个答案: