未捕获的类型错误:chart.addSingleSeriesAsDrilldown不是对象上的函数,成功- HighCharts

xsuvu9jc  于 2022-11-10  发布在  Highcharts
关注(0)|答案(1)|浏览(176)

我有一个Highchartjs实现,我正在尝试实现,我正在获取json数据,并尝试构建一个堆叠条形图钻取。我有来自api的数据,当我尝试填充它时,我最终得到了一个错误
未捕获的类型错误:chart.addSingleSeriesAsDrilldown不是对象上的函数。成功
这是我到目前为止的实现

function loadProvinceStackedChart() {
            var dataSeries = [];    
            var drill_level = 0;                                 
            var chart = {
                type: 'column',
                marginBottom: 120,
                events: {
                    drilldown: function (e) {
                        var pointName = e.point.name;
                         $.ajax({
                                  url: 'api/getDistrictData/'+ e.point.name,
                                  type: 'GET',
                                  success: function (data) {
                                         //console.log('district data is', data);
                                          var labuploadedData = [];
                                          var labPndingData =[];
                                          $.each(data, function(key, item){
                                          //console.log('item q', item);
                                           var u = {  
                                                     name: item.district_Name,
                                                     y: item.labUploaded,
                                                     drilldown: false

                                                     };
                                            var p = {
                                                       name: item.district_Name,
                                                       y: item.pending,
                                                       drilldown: false
                                                      };
                                            labuploadedData.push(u);
                                            labPndingData.push(p);
                                         });
                               // console.log('are of point', pointName);
                                  var chart = this;
                                  drilldowns4 = {
                                                  pointName: {
                                                             name: 'Uploaded',
                                                             color: '#228B22',
                                                             data: labuploadedData
                                                             }
                                                           },
                                  drilldowns6 = {
                                                  pointName: {
                                                            name: 'Pending',
                                                            color: '#FF0000',
                                                            data: labPndingData

                                                                }
                                                           },

                                series = drilldowns4[e.point.name],
                                series3 = drilldowns6[e.point.name];

                              chart.addSingleSeriesAsDrilldown(e.point, series);
                             chart.addSingleSeriesAsDrilldown(e.point, series3);

                              chart.applyDrilldown();

                                                    }      

                                                });                    
                    }
                }
            };

我尝试在success函数中使用chart方法,但是它们总是抛出一个错误。我如何从api的数据中正确地显示堆叠图?

5m1hhzi4

5m1hhzi41#

最好的方法是在drilldown模块中实现ajax查询,如下所示。

events: {
  drilldown: function(e) {

    // The Endpoint URL
    let url = 'https://jsonplaceholder.typicode.com/posts/1';
    fetch(url)
      .then(function(response) {
        // Render the Response Status
        document.getElementById('result').innerHTML = response.status;
        // Parse the body as JSON
        return response.json();
      })
      .then(function(json) {
        // Render the parsed body
        document.getElementById('result_json').innerHTML = JSON.stringify(json);
      })
    }
}

在这个论坛上,它的另一个例子是如何在drilldown事件中处理 AJAX 查询。https://www.highcharts.com/forum/viewtopic.php?t=40115#p138962

相关问题