Highchart向下钻取多个图层

Question

我做了一些搜索，找不到具体的问题，所以在这里。 Highcharts可以处理多个级别的下钻/显示数据吗？从初始数据视图中深入2-3层。

谢谢。

Answer 1

是

经由3 level Drilldown of a column chart in highchart?

Third link on Google for me

Answer 2

制造3层JS小提琴： 仅适用于IE，第一项（如试验） JSfiddle

$(function() { 
    // Create the chart 
    $('#container').highcharts({ 
     chart: { 
      type: 'bar' 
     }, 
     title: { 
      text: 'Browser market shares. January, 2015 to May, 2015' 
     }, 
     subtitle: { 
      text: 'Click the columns to view versions. Source: <a href="http://netmarketshare.com">netmarketshare.com</a>.' 
     }, 
     xAxis: { 
      type: 'category' 
     }, 
     yAxis: { 
      title: { 
       text: 'Total percent market share' 
      } 

     }, 
     legend: { 
      enabled: false 
     }, 
     plotOptions: { 
      series: { 
       borderWidth: 0, 
       dataLabels: { 
        enabled: true, 
        format: '{point.y:.1f}%' 
       } 
      } 
     }, 

     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: 'Brands', 
      colorByPoint: true, 
      data: [{ 
       name: 'Microsoft Internet Explorer', 
       y: 56.33, 
       drilldown: 'Microsoft Internet Explorer' 
      }, { 
       name: 'Chrome', 
       y: 24.03, 
       drilldown: 'Chrome' 
      }, { 
       name: 'Firefox', 
       y: 10.38, 
       drilldown: 'Firefox' 
      }, { 
       name: 'Safari', 
       y: 4.77, 
       drilldown: 'Safari' 
      }, { 
       name: 'Opera', 
       y: 0.91, 
       drilldown: 'Opera' 
      }, { 
       name: 'Proprietary or Undetectable', 
       y: 0.2, 
       drilldown: null 
      }] 
     }], 
     drilldown: { 
      series: [{ 
       name: 'Microsoft Internet Explorer', 
       id: 'Microsoft Internet Explorer', 
       data: [ 
        { 
         name: 'v11.0', 
         y: 24.13, 
         drilldown: 'test' 
        }, 
        [ 
         'v8.0', 
         17.2 
        ], 
        [ 
         'v9.0', 
         8.11 
        ], 
        [ 
         'v10.0', 
         5.33 
        ], 
        [ 
         'v6.0', 
         1.06 
        ], 
        [ 
         'v7.0', 
         0.5 
        ] 
       ] 
      }, { 
       name: 'Chrome', 
       id: 'Chrome', 
       data: [ 
        [ 
         'v40.0', 
         5 
        ], 
        [ 
         'v41.0', 
         4.32 
        ], 
        [ 
         'v42.0', 
         3.68 
        ], 
        [ 
         'v39.0', 
         2.96 
        ], 
        [ 
         'v36.0', 
         2.53 
        ], 
        [ 
         'v43.0', 
         1.45 
        ], 
        [ 
         'v31.0', 
         1.24 
        ], 
        [ 
         'v35.0', 
         0.85 
        ], 
        [ 
         'v38.0', 
         0.6 
        ], 
        [ 
         'v32.0', 
         0.55 
        ], 
        [ 
         'v37.0', 
         0.38 
        ], 
        [ 
         'v33.0', 
         0.19 
        ], 
        [ 
         'v34.0', 
         0.14 
        ], 
        [ 
         'v30.0', 
         0.14 
        ] 
       ] 
      }, { 
       name: 'Firefox', 
       id: 'Firefox', 
       data: [ 
        [ 
         'v35', 
         2.76 
        ], 
        [ 
         'v36', 
         2.32 
        ], 
        [ 
         'v37', 
         2.31 
        ], 
        [ 
         'v34', 
         1.27 
        ], 
        [ 
         'v38', 
         1.02 
        ], 
        [ 
         'v31', 
         0.33 
        ], 
        [ 
         'v33', 
         0.22 
        ], 
        [ 
         'v32', 
         0.15 
        ] 
       ] 
      }, { 
       name: 'Safari', 
       id: 'Safari', 
       data: [ 
        [ 
         'v8.0', 
         2.56 
        ], 
        [ 
         'v7.1', 
         0.77 
        ], 
        [ 
         'v5.1', 
         0.42 
        ], 
        [ 
         'v5.0', 
         0.3 
        ], 
        [ 
         'v6.1', 
         0.29 
        ], 
        [ 
         'v7.0', 
         0.26 
        ], 
        [ 
         'v6.2', 
         0.17 
        ] 
       ] 
      }, { 
       name: 'Opera', 
       id: 'Opera', 
       data: [ 
        [ 
         'v12.x', 
         0.34 
        ], 
        [ 
         'v28', 
         0.24 
        ], 
        [ 
         'v27', 
         0.17 
        ], 
        [ 
         'v29', 
         0.16 
        ] 
       ] 
      },{ 
       name: 'test', 
       id: 'test', 
       data: [ 
        [ 
         'v12.x', 
         0.34 
        ], 
        [ 
         'v28', 
         0.24 
        ], 
        [ 
         'v27', 
         0.17 
        ], 
        [ 
         'v29', 
         0.16 
        ] 
       ] 
      }] 
     } 
    }); 
});