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

如果我们点击“橙色”栏,则请求网址将更改为api.domain.com/cricket/

JSON 2结构:-

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


在第二张图中,X轴表示"player",Y轴表示"points"。我认为,单击栏时必须在Ajax中调用drilldown请求。我可以绘制第一个图形,但是推荐使用什么方法绘制第二个图形,这将在向下钻取中显示。

图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>

最佳答案

请参阅此现场演示: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的值来构造URL。



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

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


对此:

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


一切正常。

编辑

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

现场演示: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指示即使没有明确分配给该点的向下钻取序列,也应发生向下钻取事件。

09-17 15:05
查看更多