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}}//

如果我们点击＆＃34;橙色＆＃34;栏然后请求网址将更改为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>

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', {之前注释掉所有内容来检查）。 this.ddDupes函数中的H.Chart.prototype.drillUp未定义，因此无法访问其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表示即使没有明确指定给该点的向下钻取系列，也应该发生向下钻取事件。

使用具有两个不同JSON端点的Highcharts drilldown绘制条形图

1 个答案:

修改