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

Question

我有两个 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>

Answer 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 表示即使还没有明确分配给该点的下钻系列，也应该发生下钻事件。