Lazy Highcharts drilldown

Это демо JSFiddle показывает пример детализации Highcharts. При нажатии на один из столбцов диаграммы, серия заменяется на ряд детализации, соответствующий столбцу, который был нажат на

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]
        ]
    }]
}

например, если вы нажмете на столбец фрукты, эти данные будут отображаться

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

обратите внимание, что все серии детализации должны быть созданы спереди. В этом конкретном случае есть только 3 серии drilldown, поэтому это не большая проблема. Однако в моем случае существует около 30 серий детализации, и для создания каждой из них требуется выполнить несколько запросов. Есть ли способ загрузить серию детализации лениво, т. е. данные серии детализации запрашиваются только в тот момент, когда пользователь нажимает на один из столбцов?

6
highcharts javascript

2 ответов

для такого уровня функциональности я бы просто пошел вперед и создал его самостоятельно. Используйте point.events.click обратный вызов для вызова ajax и замены серии:

plotOptions: {
  series: {
    point: {
      events: {
        click: function(event) {
          var chart = this.series.chart;
          var name = this.name;
          $.ajax({
            url: name + ".json",
            success: function(data) {
              swapSeries(chart,name,data);
            },
            dataType: "json"
          });
        }
      }
    }
  }
},

здесь swapSeries - это:

  function swapSeries(chart, name, data) {
    chart.series[0].remove();
    chart.addSeries({
      data: data,
      name: name,
      colorByPoint: true
    });
  }

вот работает пример.

6

ленивые отчеты СПАО are поддерживается Highcharts, хотя он использует термин "асинхронная детализация". 

$(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>
5