懒惰Highcharts明细 [英] Lazy Highcharts drilldown

问题描述

这个JSFiddle演示显示了一个Highcharts向下钻取的例子。当您点击图表中的某一列时，系列将被替换为与单击列相对应的深入分析系列

 钻取：{
 series：[{
 id：'animals'，
 data：[
 ['Cats'，4]，
''Dogs' ，2]，
 ['Cows'，1]，
 ['Sheep'，2]，
 ['Pigs'，1] 
] 
}， {
 id：'fruits'，
 data：[
 ['Apples'，4]，
 ['Oranges'，2] 
] 
 }，{
 id：'cars'，
 data：[
 ['Toyota'，4]，
 ['Opel'，2]，
 ['' Volkswagen'，2] 
] 
}] 
} 
  

例如，如果你点击水果栏，这个数据将被显示。

  data：[
 ['Apples '，4]，
 ['Oranges' ，2] 
] 
  

请注意，所有深入分析系列都必须事先创建。在这个特例中，只有3个向下钻取系列，所以这不是一个大问题。但是，就我而言，大约有30个深入系列，创建每个系列需要执行几个查询。有没有办法让钻取系列延迟加载，也就是说钻取系列数据只在用户点击其中一列时才被请求？

解决方案 虽然它使用术语async drilldown，但它支持Lazy drilldowns 。

  $（function（）{//创建图表$（'＃container'）。highcharts（{chart：{type：'column '，events：{drilldown：function（e）{if（！e.seriesOptions）{var chart = this，drilldowns = {'Animals'：{name：'Animals'，data：[['Cows'，2]， ['Sheep'，3]]}，'Fruits'：{name：'Fruits'，data：[['Apples'，5]，['Oranges'，7]，['Bananas'，2]]}， 'Cars'：{名称：'Cars'，数据：[['Toyota'，1]， ['Volkswagen'，2]，['Opel'，5]]}，series = drilldowns [e.point.name]; //显示加载标签chart.showLoading（'Simulating Ajax ...'）; setTimeout（function（）{chart.hideLoading（）; chart.addSeriesAsDrilldown（e.point，series）;}，1000）; }}}，title：{text：'Async 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：true}，{name：'Fruits'，y：2， true}，{name：'Cars'，y：4，drilldown：true}]}]，深入分析：{series：[]}}）;}）;  

 < script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/ jquery.min.js>< / script>< script src =http://code.highcharts.com/highcharts.js>< / script>< script src =http：// code.highcharts.com/modules/drilldown.js\"></script><div id =containerstyle =min- width：310px; height：400px; margin：0 auto>< / div>  

This JSFiddle demo shows an example of a Highcharts drilldown. When you click on one of the columns in the chart, the series is replaced with a drilldown series corresponding to the column that was clicked on

drilldown: {
    series: [{
        id: 'animals',
        data: [
            ['Cats', 4],
            ['Dogs', 2],
            ['Cows', 1],
            ['Sheep', 2],
            ['Pigs', 1]
        ]
    }, {
        id: 'fruits',
        data: [
            ['Apples', 4],
            ['Oranges', 2]
        ]
    }, {
        id: 'cars',
        data: [
            ['Toyota', 4],
            ['Opel', 2],
            ['Volkswagen', 2]
        ]
    }]
}

For example, if you click on the fruits column, this data will be displayed

data: [
    ['Apples', 4],
    ['Oranges', 2]
]

Notice that all the drilldown series have to be created up front. In this particular case, there are only 3 drilldown series, so this isn't a big issue. However, in my case, there are about 30 drilldown series and creating each one requires a few queries to be executed. Is there a way to have the drilldown series loaded lazily instead, i.e. the drilldown series data is only requested at the point when a user clicks on one of the columns?

解决方案

Lazy drilldowns are supported by Highcharts, though it uses the term "async drilldown".

$(function() {

  // Create the chart
  $('#container').highcharts({
    chart: {
      type: 'column',
      events: {
        drilldown: function(e) {
          if (!e.seriesOptions) {

            var chart = this,
              drilldowns = {
                'Animals': {
                  name: 'Animals',
                  data: [
                    ['Cows', 2],
                    ['Sheep', 3]
                  ]
                },
                'Fruits': {
                  name: 'Fruits',
                  data: [
                    ['Apples', 5],
                    ['Oranges', 7],
                    ['Bananas', 2]
                  ]
                },
                'Cars': {
                  name: 'Cars',
                  data: [
                    ['Toyota', 1],
                    ['Volkswagen', 2],
                    ['Opel', 5]
                  ]
                }
              },
              series = drilldowns[e.point.name];

            // Show the loading label
            chart.showLoading('Simulating Ajax ...');

            setTimeout(function() {
              chart.hideLoading();
              chart.addSeriesAsDrilldown(e.point, series);
            }, 1000);
          }

        }
      }
    },
    title: {
      text: 'Async 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: true
      }, {
        name: 'Fruits',
        y: 2,
        drilldown: true
      }, {
        name: 'Cars',
        y: 4,
        drilldown: true
      }]
    }],

    drilldown: {
      series: []
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/drilldown.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

这篇关于懒惰Highcharts明细的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！