Javascript 使用Highcharts向下展开并使用两个不同的JSON端点绘制条形图

我有两个JSON端点。我正在尝试绘制一个具有向下展开功能的Highcharts条形图。向下钻取将指向另一个JSON端点。在图形中，数据动态地来自端点

JSON 1:-

https://api.myjson.com/bins/156yh3

JSON 1结构：-

[{
    "name": "cricket",
    "number": "2"
}]

它将首先用JSON 1数据绘制图形。在第一个图形中，X轴表示

“名称”

，Y轴表示

“编号”

。无论何时单击任何条，它都会调用JSON 2端点，并将单击的条

“name”

作为URL参数传递

JSON 2的端点看起来像，

api.domain.com/{{name}}/

如果我们单击“橙色”栏，则请求url将更改为

api.domain.com/cricket/

JSON 2结构：-

[{
    "player": "xyz",
    "points": "2"
}]

在第二个图形中，X轴表示

“玩家”

，Y轴表示

“点”

。我想，当单击一个条时，我必须在

深入查看
中调用
Ajax
请求。我可以绘制第一个图形，但是绘制第二个图形的推荐方法是什么，这将在深入中提供

图1的代码：-

$(function() {
  $.getJSON("https://api.myjson.com/bins/156yh3", function(data) {
    console.log(data);
    Highcharts.chart('container', {
      chart: {
        type: 'column'
      },
      title: {
        text: 'Name Vs Numbers'
      },
      subtitle: {
        text: 'Chart View Here'
      },
      xAxis: {
        type: 'category',
        categories: data.map(function(x) {
          return x.name;
        })
      },
      yAxis: {
        title: {
          text: 'Numbers'
        }
      },
      legend: {
        enabled: false
      },
      plotOptions: {
        series: {
          borderWidth: 0,
          dataLabels: {
            enabled: true,
            format: '{point.y:.1f}'
          }
        }
      },
      tooltip: {
        headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
        pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}</b> of total<br/>'
      },
      series: [{
        colorByPoint: true,
        data: data.map(function(x) {
          return x.number * 1;
        })
      }]
    });
  });
});

$（函数（）{
$.getJSON（“https://api.myjson.com/bins/156yh3，函数（数据）{
控制台日志（数据）；
Highcharts.chart（'容器'{
图表：{
类型：“列”
},
标题：{
文字：“姓名与号码”
},
副标题:{
文本：“此处的图表视图”
},
xAxis：{
类型：'类别'，
类别：data.map（函数（x）{
返回x.name；
})
},
亚克斯：{
标题：{
文字：“数字”
}
},
图例：{
已启用：false
},
打印选项：{
系列：{
边框宽度：0，
数据标签：{
启用：对，
格式：“{point.y:.1f}”
}
}
},
工具提示：{
headerFormat:“{series.name}
”，
pointFormat:{point.name}:{point.y:.2f}总计

},
系列：[{
colorByPoint：对，
数据：data.map（函数（x）{
返回x.number*1；
})
}]
});
});
});

HTML:-

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto;"></div>

请参阅此现场演示：

它总是在点击事件上添加一个新的深入分析系列（使用API随机生成的数据），并执行深入分析

在
series.point.events.的回调中，单击我使用的
addSeriesAsDrilldown
：

  plotOptions: {
    series: {
      point: {
        events: {
          click: function(e) {
            var point = this,
              chart = point.series.chart;

            $.getJSON('https://canvasjs.com/services/data/datapoints.php?xstart=1&ystart=10&length=10&type=json&callback=?', function(data) {
              chart.addSeriesAsDrilldown(point, {
                data: data
              });
            });

          }
        }
      }
    }
  },

您可以使用
point.name
的值来构造URL


核心代码似乎存在一些问题-它在钻取时抛出了一个错误（您可以通过注释掉
var chart=Highcharts.chart（'container'，{
）之前的所有内容来检查这一点）
H.Chart.prototype.drillUp
函数中的.dddups
未定义，因此无法访问其
length
属性。我通过更改以下代码修改了核心代码：

this.ddDupes.length = []; // #3315

为此：

if (this.ddDupes) {
  this.ddDupes.length = []; // #3315
}

一切正常

编辑
我找到了一个更好的解决方案。它基于API记录中提到的官方Highcharts演示，用于
图表.events.drilldown
：

现场演示：

drilldown:true
表示即使尚未将深入分析序列明确指定给该点，也应发生深入分析事件

var chart = Highcharts.chart('container', {

  chart: {
    type: 'column',
    events: {
      drilldown: function(e) {
        var chart = this;

        $.getJSON('https://canvasjs.com/services/data/datapoints.php?xstart=1&ystart=10&length=10&type=json&callback=?', function(data) {
          chart.addSeriesAsDrilldown(e.point, {
            data: data
          });
        });
      }
    }
  },

  series: [{
    data: [{
      name: 'John',
      y: 1,
      drilldown: true
    }, 2],
  }]
});