Community Learn Tools Library Leisure
search
English
Home > List of blog posts > highcharts下鉆功能
Blogger Information
Blog 2
fans 0
comment 0
visits 1224
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
highcharts下鉆功能
手机用户843026802
Original
717 people have browsed it

highcharts下鉆功能

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <!-- 引入 ECharts 文件 -->
  6.     <script src='jquery-1.10.2.min.js'></script>
  8.     <script src="echarts.min.js"></script>
  9.     <script src="highcharts.js"></script>
  10.     <script src="drilldown.js"></script>
  11. </head>
  12. <body>
  13.     <!--  准备一个具备大小（宽高）的 DOM -->
  14.     <div id="main" style="width: 700px;height:500px;"></div>
  15.     <script type="text/javascript">
  17. // Create the chart
  18. Highcharts.chart('main', {
  19.     chart: {
  20.         type: 'bar',   
  21.         events: {
  22.             drilldown: function (e) {
  24.                 if (!e.seriesOptions) {
  25.                     var chart = this,
  26.                         drilldowns = result,
  27.                         series = drilldowns[e.point.id];
  28.                         console.info(drilldowns[e.point.id]);
  29.                         console.info(drilldowns[2]);
  31.                     // Show the loading label
  32.                     chart.showLoading('Simulating Ajax ...');
  33.                     setTimeout(function () {
  34.                         chart.hideLoading();
  35.                         if(series.length>1){//多图显示                          
  36.                             chart.addSingleSeriesAsDrilldown(e.point, series[0]);
  37.                             chart.addSingleSeriesAsDrilldown(e.point, series[1]);
  38.                             chart.applyDrilldown();
  39.                         }else{
  40.                             chart.addSeriesAsDrilldown(e.point, series[0]);
  41.                         }
  42.                     }, 1000);
  43.                 }
  44.             }
  45.         }
  46.     },
  47.     title: {
  48.         text: 'Async drilldown'
  49.     },
  50.     xAxis: {
  51.         type: 'category'
  52.     },
  54.     legend: {
  55.         enabled: true
  56.     },
  58.     plotOptions: {
  59.         pie: {
  60.                 allowPointSelect: true,
  61.                 cursor: 'pointer',
  62.                 dataLabels: {
  63.                 enabled: true,
  64.                 format: '{point.name}: {point.percentage:.1f}%'
  65.                 },
  66.                 showInLegend: true
  67.             },
  68.         series: {
  69.             borderWidth: 0,
  70.             dataLabels: {
  71.                 enabled: true
  72.             },
  73.             events:{
  74.             click:function(e){
  75.                 if(e.point.toDetail){
  76.                     result={
  77.                         '22': [{
  78.                                 "center": ["200", null],
  79.                                 "id":'Fruitsid',
  80.                                 "name": 'Fruits',
  81.                                 "data": [
  82.                                     ['Apples', 5],
  83.                                     ['Oranges', 7],
  84.                                     ['Bananas', 2]
  85.                                 ],
  86.                                 "type": 'pie',
  87.                                 "size":300,                                                               
  88.                             },
  89.                             {
  90.                                 "id":'Carsid',
  91.                                 "name": 'Cars',
  92.                                 "type": 'pie',
  93.                                 "center": ["900", null],
  94.                                 "size":300,
  95.                                 "data": [
  96.                                     ['Toyota', 1],
  97.                                     ['Volkswagen', 2],
  98.                                     ['Opel', 5]
  99.                                 ]
  100.                             }]
  101.                         }
  102.                 }else{
  103.                     result={
  104.                             '1': [{
  105.                                 id:'Animalsid',
  106.                                 name: 'Animalsn',
  107.                                 data:[{
  108.                                     id:'22',
  109.                                     name:'Cows',
  110.                                     toDetail:true,
  111.                                     y:2,
  112.                                     drilldown: true
  113.                                 },{
  114.                                     id:'2',
  115.                                     name:'Sheep',
  116.                                     y:3,
  117.                                     drilldown: true
  118.                                 }
  119.                                 ]
  121.                             }]
  122.                         }
  123.                 }                
  124.                 }
  125.                 }    
  126.         }
  128.     },
  130.     series: [{
  131.         name: 'Things1',
  132.         colorByPoint: true,
  133.         center: [200, null],
  134.         size:300,
  135.         data: [{
  136.             id:'1',
  137.             name: 'Animals',
  138.             y: 5,
  139.             drilldown: true
  140.         }, {
  141.             id:'2',
  142.             name: 'Fruits',
  143.             y: 2,
  144.             drilldown: true
  145.         }, {
  146.             id:'3',
  147.             name: 'Cars',
  148.             y: 4,
  149.             drilldown: true
  150.         }]
  151.     }
  152.     ],
  154.     drilldown: {
  155.         series: [2]
  156.     }
  157. });
  159.     </script>
  160. </body>
  161. </html>

轉載收藏
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011320740/article/details/70800565

Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post