Highcharts堆叠柱状图带下钻功能

小渣渣

一开始以为堆叠柱状图不能实现下钻功能的，其实是可以实现的，

代码如下：

1. var global = {};
   
2. global.app = {};
   
3. global.ui = {};
   
4. 
   
5. var _drillUpButton={
   
6.     relativeTo: 'spacingBox',
   
7.     position: {
   
8.         y: 0,
   
9.         x: 0
   
10.     },
    
11.     theme: {
    
12.         fill: 'white',
    
13.         'stroke-width': 1,
    
14.         stroke: 'silver',
    
15.         r: 0,
    
16.         states: {
    
17.             hover: {
    
18.                 fill: '#bada55'
    
19.             },
    
20.             select: {
    
21.                 stroke: '#039',
    
22.                 fill: '#bada55'
    
23.             }
    
24.         }
    
25.     }
    
26. };
    
27. 
    
28. var _data = [
    
29.                 ["租赁二分公司(原商务车分公司)", 5000],
    
30.                 ["市西服务中心-已禁用", 2496],
    
31.                 ["专车管理中心", 54],
    
32.                 ["营运九分公司", 13177],
    
33.                 ["大众新亚出租汽车公司", 317],
    
34.                 ["金山大众出租汽车公司", 7407],
    
35.                 ["国宾车分公司", 11],
    
36.                 ["租用车队", 89],
    
37.                 ["约租车队", 800],
    
38.                 ["嘉定大众出租汽车公司-已禁用", 62],
    
39.                 ["市中出租", 804],
    
40.                 ["浦东出租", 880],
    
41.                 ["市南出租", 474],
    
42.                 ["奉贤大众汽车客运公司", 10],
    
43.                 ["租赁第一分公司(市西分公司)", 5700]
    
44. ];
    
45. var _data2 = [
    
46.                 ["租赁二分公司(原商务车分公司)", 3000],
    
47.                 ["市西服务中心-已禁用", 2496],
    
48.                 ["专车管理中心", 54],
    
49.                 ["营运九分公司", 13177],
    
50.                 ["大众新亚出租汽车公司", 317],
    
51.                 ["金山大众出租汽车公司", 7407]
    
52. ];
    
53. 
    
54. global.ui.chart = {
    
55.     stackColumn: function (id, title, value, data, drilldownSeries)
    
56.     {
    
57.         $(id).highcharts({
    
58.             chart: {
    
59.                 type: 'column',
    
60.                 options3d: {
    
61.                     enabled: true,
    
62.                     alpha: 15,
    
63.                     beta: 15,
    
64.                     depth: 50,
    
65.                     viewDistance: 25
    
66.                 }
    
67.             },
    
68.             title: {
    
69.                 text: title,
    
70.                 style: "font-size:12px;"
    
71.             },
    
72.             xAxis: {
    
73.                 labels: {
    
74.                     rotation: -45,
    
75.                     style: {
    
76.                         fontSize: '13px',
    
77.                         fontFamily: 'Verdana, sans-serif'
    
78.                     }
    
79.                 },
    
80.                 type: "category"
    
81.             },
    
82.             yAxis: {
    
83.                 min: 0,
    
84.                 title: {
    
85.                     text: value,
    
86.                     align: 'high'
    
87.                 }, labels: {
    
88.                     enabled: false
    
89.                 }
    
90.             },
    
91.             tooltip: {
    
92.                 pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
    
93.                 shared: true
    
94.             },
    
95.             plotOptions: {
    
96.                 column: {
    
97.                     stacking: 'normal',
    
98.                     dataLabels: {
    
99.                         enabled: true
    
100.                     },
     
101.                     showInLegend: false
     
102.                 }
     
103.             },
     
104.             credits: {
     
105.                 enabled: false
     
106.             },
     
107.             series: data,
     
108.             drilldown: {
     
109.                 drillUpButton: _drillUpButton,
     
110.                 series: drilldownSeries
     
111.             }
     
112.         });
     
113.     }
     
114. };

复制代码

调用的代码：

1. global.ui.chart.stackColumn("#statisticsyear", "年度分析", "事故 (起)",
   
2.                  [
   
3.                     {
   
4.                         name: "未结案",
   
5.                         data: [
   
6.                             {
   
7.                                 name: "2012年",
   
8.                                 y: 500,
   
9.                                 drilldown: 'year'
   
10.                             },
    
11.                             {
    
12.                                 name: "2013年",
    
13.                                 y: 200,
    
14.                                 drilldown: 'year'
    
15.                             },
    
16.                             {
    
17.                                 name: "2014年",
    
18.                                 y: 560,
    
19.                                 drilldown: 'year'
    
20.                             },
    
21.                             {
    
22.                                 name: "2015年",
    
23.                                 y: 150,
    
24.                                 drilldown: 'year'
    
25.                             },
    
26.                             {
    
27.                                 name: "2016年",
    
28.                                 y: 680,
    
29.                                 drilldown: 'year'
    
30.                             }]
    
31.                     },
    
32.                     {
    
33.                         name: "已结案",
    
34.                         data: [
    
35.                             {
    
36.                                 name: "2012年",
    
37.                                 y: 740,
    
38.                                 drilldown: 'year2'
    
39.                             },
    
40.                             {
    
41.                                 name: "2013年",
    
42.                                 y: 858,
    
43.                                 drilldown: 'year'
    
44.                             },
    
45.                             {
    
46.                                 name: "2014年",
    
47.                                 y: 10,
    
48.                                 drilldown: 'year'
    
49.                             },
    
50.                             {
    
51.                                 name: "2015年",
    
52.                                 y: 855,
    
53.                                 drilldown: 'year'
    
54.                             },
    
55.                             {
    
56.                                 name: "2016年",
    
57.                                 y: 600,
    
58.                                 drilldown: 'year'
    
59.                             }]
    
60.                     }
    
61.             ], [{
    
62.                 id: 'year',
    
63.                 name: "未结案",
    
64.                 data: _data
    
65.             },
    
66.             {
    
67.                 id: 'year2',
    
68.                 name: "已结案",
    
69.                 data: _data2
    
70.             }]);

复制代码

小渣渣

我来附上 Highcharts的文档链接吧  http://api.hcharts.cn/