我有两个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.drilldown
:https://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
指示即使没有明确分配给该点的向下钻取序列,也应发生向下钻取事件。