javascript - Highcharts 异步钻取(3 级)- 钻取不起作用

Question

我在 highcharts 中创建了一个异步钻取(Treemap1 到 Treemap2 到折线图)。每次向下钻取都从服务器获取数据。向下钻取功能按预期工作。从 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();
        });
    }

}

这是问题的 fiddle 链接 - https://jsfiddle.net/gaurav_neema/gkdoa9jr/7/

我已经简化了 2 个级别的代码。向下钻取到任何节点，然后再次按返回按钮进行向上钻取。

这个错误的原因是什么？

Answer 1

你可以从this中得到一个想法我在 here 上找到的 fiddle .您必须在 drillup() 事件下更新聊天。以下是来自 fiddle 的示例代码。

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

});