使用带有两个不同 JSON 端点的 Highcharts 向下钻取绘制条形图

Posted 2023-05-08

【中文标题】使用带有两个不同 JSON 端点的 Highcharts 向下钻取绘制条形图

【英文标题】：Plot a bar graph using Highcharts drilldown with two different JSON end points

【发布时间】：2018-06-08 06:03:36

【问题描述】：

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

JSON 1 :- https://api.myjson.com/bins/156yh3

JSON 1 结构：-

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

它将首先使用 JSON 1 数据绘制图形。在第一张图中，X 轴代表"name"，Y 轴代表"number"。每当我们单击任何条时，它将调用 JSON 2 端点并将单击的条 "name" 作为 URL 参数传递。

JSON 2 端点看起来像，api.domain.com/name//

如果我们点击“橙色”栏，那么请求 url 将变为api.domain.com/cricket/

JSON 2 结构：-

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

在第二张图中，X 轴代表"player"，Y 轴代表"points"。我想，当点击一个栏时，我必须在drilldown 中调用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;
        )
      ]
    );
  );
);

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>

【参考方案1】：

请参阅此现场演示：http://jsfiddle.net/kkulig/1o4mr6jk/

它总是在点击事件上添加一个新的向下钻取系列（使用 API 随机生成的数据）并执行向下钻取。

在series.point.events.click 的回调中，我使用了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 的值来构建您的网址。

---

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

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

到这里：

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

一切正常。

编辑

我找到了更好的解决方案。它基于 chart.events.drilldown 的 API 记录中提到的官方 Highcharts 演示：https://api.highcharts.com/highcharts/chart.events.drilldown

现场演示： http://jsfiddle.net/kkulig/u1z5z40b/

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],
  ]
);

drilldown: true 表示即使还没有明确分配给该点的下钻系列，也应该发生下钻事件。