highcharts饼状图下钻示例

小渣渣

封装好的方法：

1. //饼状图
   
2.     function piechart(id, title, series, drilldownSeries)
   
3.     {
   
4.         $(id).highcharts({
   
5.             chart: {
   
6.                 plotBackgroundColor: null,
   
7.                 plotBorderWidth: null,
   
8.                 plotShadow: false,
   
9.                 type:'pie'
   
10.             },
    
11.             title: {
    
12.                 text: title,
    
13.                 style: "font-size:12px;"
    
14.             },
    
15.             tooltip: {
    
16.                 //pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    
17.                 pointFormat: '<span style="color:{point.color}">事故数：{point.y}<br/>占比：{point.percentage:.2f}%</span>'
    
18.             },
    
19.             plotOptions: {
    
20.                 pie: {
    
21.                     //allowPointSelect: true,
    
22.                     //cursor: 'pointer',
    
23.                     dataLabels: {
    
24.                         enabled: false
    
25.                     },
    
26.                     showInLegend: false
    
27.                 }
    
28.             },
    
29.             credits: {
    
30.                 enabled: false
    
31.             },
    
32.             series: series,
    
33.             drilldown: drilldownSeries
    
34.         });
    
35.     }

复制代码

调用：

1. $(function () {
   
2.         Highcharts.setOptions({
   
3.             lang: {
   
4.                 drillUpText: '<< 返回 {series.name}'
   
5.             }
   
6.         });
   
7.         piechart('#accidentstatus', '事故状态', [{
   
8.             colorByPoint: true,
   
9.             name: '事故状态',
   
10.             data: [
    
11.                 {
    
12.                     name: '未结案',
    
13.                     y: 620,
    
14.                     drilldown: 'animals'
    
15. 
    
16.                 },
    
17.                 {
    
18.                     name: '已结案',
    
19.                     y: 9514,
    
20.                     drilldown: 'fruits'
    
21.                 }
    
22.             ]
    
23.         }], {
    
24.             drillUpButton: {
    
25.                 relativeTo: 'spacingBox',
    
26.                 position: {
    
27.                     y: 0,
    
28.                     x: 0
    
29.                 },
    
30.                 theme: {
    
31.                     fill: 'white',
    
32.                     'stroke-width': 1,
    
33.                     stroke: 'silver',
    
34.                     r: 0,
    
35.                     states: {
    
36.                         hover: {
    
37.                             fill: '#bada55'
    
38.                         },
    
39.                         select: {
    
40.                             stroke: '#039',
    
41.                             fill: '#bada55'
    
42.                         }
    
43.                     }
    
44.                 }
    
45.             },
    
46.             series: [{
    
47.                 id: 'animals',
    
48.                 data: [
    
49.                     ['Cats', 4],
    
50.                     ['Dogs', 2],
    
51.                     ['Cows', 1],
    
52.                     ['Sheep', 2],
    
53.                     ['Pigs', 1]
    
54.                 ]
    
55.             }, {
    
56.                 id: 'fruits',
    
57.                 data: [
    
58.                     ['Apples', 4],
    
59.                     ['Oranges', 2]
    
60.                 ]
    
61.             }]
    
62.         });
    
63. });

复制代码

注意！！！！！如果，点击没有效果，就是缺少引用！！！

记得引用/js/modules/drilldown.js 这个玩意。

小渣渣

官方下钻图  示例

链接：http://code.hcharts.cn/highcharts/hhhhWc