Jquery 向下钻取多级高阶图表

我们喜欢在Highchart中深入研究多个层次。Highchart中已经有一个例子了吗

当前使用的代码：

$(div).highcharts({
    chart: {type: 'column'},
    credits: {enabled: false},          
    title: {text: title},
    xAxis: {
        categories: [
            'Instroom',
            'Rijdend',
            'Úitstroom'
        ]
    },
    yAxis: {title: {text: ytitle}},
    legend: {enabled: true},
    plotOptions: {series: { borderWidth: 1, dataLabels: {enabled: true,}}},
    series: first,
    drilldown: {
        series: drillDownObject(second)
    }
});

---

您必须为多重向下钻取编写自定义代码，我们可以通过在每列（第一个图表）中存储数据系列并将此系列传递到下一个图表等来实现这一点。

有可能，只需添加所有向下钻取系列，然后在点和向下钻取之间创建连接。见：

---

有关多级饼图，请查看

var chartSeriesData=[]；
var chartDrilldownData=[]；
$.ajax({
键入：“GET”，
url:'abc.json'，
成功：功能（数据）{
var agentJson=数据；
对于（var i=0；i
this.EixoX=[“2016年6月”、“2016年7月”、“2016年前”、“2016年设定”、“2016年结束”、“2016年11月”、“2016年Dez”]；
this.EixoY=“Reais”；
this.Class=“DivGraficoLinhaDoTempo”；
this.Titulo=“Média de Vendas por Equipe”；
这是潜台词；
这是从价税=[{
名称：“ECLEIA”，
数据：[30000320005400050000]，//一月，FEV，三月，ABR，五月，六月
卖方：[{名称：“ECLEIAv1”，数据：[32004000540005270022000270001]}，{名称：“ECLEIAv2”，数据：[3000055045000220003200033001]}]
},{
姓名：“乔安娜”，
数据：[43000120000340000400030004000]，
卖方：[{名称：“JOANAv1”，数据：[7200055005700059000270000250000]}，{名称：“JOANAv2”，数据：[22000500054000540002300266001]}]
},{
姓名：“加布里埃尔”，
数据：[22000,22000,34000,20004,30004,4000]，
卖方：[{name:“GABRIELEv1”，数据：[11000300056000540002300230001]，卖方：[{name:“GABRIELEv1SUB1”，数据：[11000300056000540002300230001]}，{name:“GABRIELEv1SUB2”，数据：[600005000540005245025550270001]}，{name:“GABRIELEv2”，数据：[600005000540005245025550270001]}]
},{
姓名：“弗朗西斯科”，
数据：[5400001200030004400030004000]，
卖方：[{名称：“方济各1号”，数据：[52006000520005110026600240001]}，{名称：“方济各2号”，数据：[50000560054000525002300238001]}]
}];
这是从价税=[{
名称：“米迪亚”，
数据：[5400001200030004400030004000]
}];
//辅助心房肌
这是尼维尔；
这是指数；
这是indexvendedor；
这是我的名字；
var drilldownttitle=“设备”；
///UserCodeRegionStart:[用户函数]（不要删除此注释。）
var_this=这个；
//var vetorNomesX=[]；
var colors=Highcharts.getOptions（）.colors；
$（函数（）{
Highcharts.Tick.prototype.drillable=function（）{}；//删除链接DOS标签DO EIXO X（mes），pois cada mes possui“n”vendedores
变量选项={
键入：“列”，
图表：{
renderTo：“容器”，
活动：{
向下展开：函数（e）{
//控制台日志（e.point）；
setTitle（{text:drilldowntTitle+e.point.name}）；
},
向上钻取：功能（e）{
chart.setTitle（{text:_this.Titulo}）；
}
}
},
标题：{
text:_this.Titulo
},
副标题:{
文本：_this.Subtitulo
},
xAxis：{
类别：_this.EixoX
},
亚克斯：{
标签：{
格式化程序：函数（）{
返回Highcharts.numberFormat（此.value为0）；
}
},
标题：{
text:_this.EixoY
}
},
打印选项：{
专栏：{
光标：“指针”，
要点：{
活动：{
点击：功能（e）{
_this.indexmes=e.point.x；
_this.indexvendedor=e.point.series.columnIndex；
//我希望你能为我做点什么
如果（_this.drilldownniveis）{
chart.setTitle（{text:drilldownTitle+_this.drilldownniveis[_this.indexvendedor].name}）；
_this.drilldownniveis=\u this.drilldownniveis[\u this.indexvendedor].drilldown；
}否则{
setTitle（{text:drilldowntTitle+options.series[\u this.indexvendedor].name}）；
_this.drilldownniveis=options.series[\u this.indexvendedor].data[\u this.indexmes].drilldown；
if（options.series[\u this.indexvendedor].data[\u this.indexmes].drilldown.length下面是一个保留轴上名称的示例。
（深入研究“动物”>哺乳动物）

向下展开选项如下所示：

drilldown: {
  series: [{
    id: 'animals',
    data: [{
        name: 'Mammals',
        y: 4,
        drilldown: 'mammals'
      },
      ['Reptiles', 2],
      ['Vertebrates', 1]
    ]
  }, {
    id: 'mammals',
    data: [['Cats', 3], ['Dogs', 2], ['Platypus', 1]]
  },
  ...

效果很好。谢谢Kass。谢谢你发布这篇文章，但是如果香蕉没有更多的片段或向下搜索，有没有办法显示没有片段？需要帮助JSFIDLE需要在脚本标记中使用https。如果动物有2个孩子，而这些孩子每个都有2个孩子，我该怎么做？你可以添加任意多的向下搜索，例如：如何识别深入级别它存储在系列选项中，例如：
chart.series[0].options.\u levelNumber
现在JSFIDLE需要在脚本标记中使用https：
$(function () {

    // Create the chart
    $('#container').highcharts({
        chart: {
            type: 'pie'
        },
        title: {
            text: 'Deep drilldown'
        },
        xAxis: {
            type: 'category'
        },

        legend: {
            enabled: false
        },

        plotOptions: {
            series: {
                borderWidth: 0,
                dataLabels: {
                    enabled: true,
                }
            }
        },

        series: [{
            name: 'Things',
            colorByPoint: true,
            data: [{
                name: 'Animals',
                y: 5,
                drilldown: 'animals'
            },{
                name: 'Food',
                y: 4,
                drilldown: 'food'
            }]
        }],
        drilldown: {
            series: [{
                id: 'food',
                name: 'Food',
                data: [{
                    name: 'Apple',
                    y: 1.5,
                    drilldown: 'apple'
                },
                    ['Banana', 1],
                    ['Peer', 0.5],
                    ['Pineapple', 1]
                ]
            }, {

                id: 'apple',
                data: [['1/6' ,1],
                      ['1/3' , 2],
                      ['1/2' , 3]]
            },{
                id: 'animals',
                name: 'Animals',
                data: [{
                    name: 'Cats',
                    y: 5,
                    drilldown: 'cats'
                }, ['Dogs', 2],
                    ['Cows', 1],
                    ['Sheep', 1],
                    ['Pigs', 1]
                ]
            }, {

                id: 'cats',
                data: [1, 2, 3]
            }]
        }
    })
});

<script src="js/jquery-2.0.2.min.js"></script>  
    <script src="js/highcharts.js"></script>  
    <script src="js/drilldown.js"></script>  
    <script>  
        var chartSeriesData = [];
  var chartDrilldownData = [];

$.ajax({
type: 'GET',
url: 'abc.json',
success: function(data) {


    var agentJson = data;

    for (var i = 0;i <agentJson.countryInfo.length; i++)

        {

        var series_name = agentJson.countryInfo[i].name;
        var drill_id = agentJson.countryInfo[i].drilldown;
        var series_data = agentJson.countryInfo[i].y;

        var drill_data = agentJson.countryInfo[i].data;


              chartSeriesData.push({
                 name: series_name,
                 y: parseFloat(series_data),
                 drilldown : drill_id                                     
              }); 


         chartDrilldownData.push({
             data : drill_data,
             id: drill_id,
             name: series_name,

         });


        }

    /// END FOR LOOP


    $('#countryInfo').highcharts({

        credits: {
            enabled: false
        },

        chart: {
            type: 'pie',
            backgroundColor:'rgba(255, 255, 255, 0.1)'
        },
        title: {
            text: 'Human Resources'
        },

        subtitle: {
            text: ''
        },
        plotOptions: {
            series: {
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '{point.name}: {point.y:.1f}%',
                    style: {
                        color: '#000',
                        fontWeight: 'bold',
                        fontSize: '12px',
                        textShadow: "0px #ffffff"

                     }
                }
            }
        },

        tooltip: {
            headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
            pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
        },
        series: [{
            name: 'Country',
            colorByPoint: true,
            data: chartSeriesData
        }],
        drilldown: {
             series: chartDrilldownData
            }
    });



}


});


    </script>  


and your json file look likes:

{"countryInfo":[{"name":"Firefox","y":4,"drilldown":"Firefox","data":[["desktop",1]]},{"name":"Chrome","y":176,"drilldown":"Chrome","data":[["desktop",1],["desktop",18]]}]}

drilldown: {
  series: [{
    id: 'animals',
    data: [{
        name: 'Mammals',
        y: 4,
        drilldown: 'mammals'
      },
      ['Reptiles', 2],
      ['Vertebrates', 1]
    ]
  }, {
    id: 'mammals',
    data: [['Cats', 3], ['Dogs', 2], ['Platypus', 1]]
  },
  ...