Асинхронная развертка Highcharts (3 уровня) - развертка не работает

Question

Я создал асинхронную развертку (от Treemap1 до Treemap2 до Line Chart) в старших графиках.Данные получены с сервера для каждой детализации.Функциональность детализации работает, как и ожидалось.Детализация от Treemap2 до Treemap1 также работает.

Но когда я пытаюсь выполнить детализацию от линейного графика до Treemap2, я получаю ошибку:

Uncaught TypeError: Cannot read property 'x' of null 

Во время этой проверки я проверилданные серии и она пуста.

Вот код для события детализации:

drilldown(e){

    let drilldown_point = e.point;
    let chart = this;
    let current_level = 0;

    if(chart.drilldownLevels){
        current_level = chart.drilldownLevels.length;
    }

    //api call to get drill down data based on current level of drilldown
    if(current_level == 0){
        level_0_point_name = e.point.name;
        chart.showLoading('Loading ...');
        Api()
        .get('/dataFromServer')
        .then(response => {

            //get sub series data and set drilldown = true for 2nd  level drilldown
            let sub_series_data = response.data;
            sub_series_data.map(value => value.drilldown = true);

            //create series for sub treemap
            let sub_series = {
                type: 'treemap',
                data: sub_series_data,
            };

            //Update title and subtitle of subchart
            chart.update({
                title: {
                    text: "1st Level Drilldown"
                },
                subtitle: {
                    text: ""
                }

            });

            chart.addSeriesAsDrilldown(drilldown_point, sub_series);
            chart.applyDrilldown();
            chart.hideLoading();
        });
    }
    else if(current_level == 1){
        // console.log(this)
        level_1_point_name = e.point.name;
        chart.showLoading('Loading ...');
        Api()
        .get('/dataFromServer')
        .then(response => {

            //get sub series data and set drilldown = true for 2nd  level drilldown
            let sub_series_data = response.data;
            let x_axis_categories = sub_series_data.map(value => value.name)

            //create series for sub treemap
            let sub_series = {
                type: 'line',
                name: 'LineChart',
                colorByPoint: true,
                data: sub_series_data,
            };

            //Update title and subtitle of subchart
            chart.update({
                title: {
                    text: "2nd Level Drilldown"
                },
                subtitle: {
                    text: ""
                },
                yAxis: {
                    title: {
                        text: 'Number'
                    }
                },
                xAxis: {
                    title: {
                        text: 'X-axis title'
                    },
                    categories: x_axis_categories
                }

            });

            chart.addSeriesAsDrilldown(drilldown_point, sub_series);
            chart.applyDrilldown();
            chart.hideLoading();
        });
    }

}

Вот ссылка на скрипту для выпуска - https://jsfiddle.net/gaurav_neema/gkdoa9jr/7/

У меня естьупрощенный код для 2 уровней.Разверните до любого узла и снова нажмите кнопку «Назад», чтобы развернуть.

Что может быть причиной этой ошибки?

Answer 1

Вы можете иметь представление от этой скрипки, которую я нашел на здесь . Вы должны обновить чат в рамках Drillup (). Ниже приведен пример кода из скрипки.

Highcharts.chart('container', {

  chart: {
    events: {
      drilldown: function(e) {
        console.log(this)
        var chart = this,
          drilldowns = chart.userOptions.drilldown.series,
          series = [];
        Highcharts.each(drilldowns, function(p, i) {
          if (p.id === e.point.name) {
            chart.addSingleSeriesAsDrilldown(e.point, p);
          }
        });
        chart.applyDrilldown();
        chart.update({
          chart: {
            type: 'column'
          }
        })
      },
      drillup: function() {
        let chart = this;
        console.log(this)
        chart.update({
          chart: {
            type: 'treemap',
          }
        })
      }
    }
  },
  
  legend: {
    enabled: true
  },

  series: [{
    animation: false,
    type: "treemap",
    data: [{
      id: 'B',
      name: 'Bananas',
      color: "#ECE100"
    }, {
      name: 'Anne',
      parent: 'B',
      value: 3,
      drilldown: true
    }, {
      name: 'Rick',
      parent: 'B',
      value: 10,
      drilldown: 'BRickSales'
    }, {
      name: 'Peter',
      parent: 'B',
      value: 1

    }]
  }],

  drilldown: {
    series: [{
      name: 'Ricks quotes',
      id: 'Rick',
      type: 'column',
      data: [
        ['v11', 30],
        ['v8', 17],
        ['v9', 8],
        ['v10', 5],
        ['v7', 3]
      ]
    }, {
      name: 'Rick Calls',
      id: 'Rick',
      type: 'line',
      data: [
        ['v11', 50],
        ['v8', 40],
        ['v9', 60],
        ['v10', 65],
        ['v7', 73]
      ]
    }, {
      name: 'Anne quotes',
      id: 'Anne',
      type: 'column',
      data: [
        ['v11', 2],
        ['v8', 7],
        ['v9', 3],
        ['v10', 5],
        ['v7', 3]
      ]
    }, {
      name: 'Anne Calls',
      id: 'Anne',
      type: 'line',
      data: [
        ['v11', 50],
        ['v8', 40],
        ['v9', 60],
        ['v10', 65],
        ['v7', 73]
      ]
    }]
  },

});