Javascript 使用json的Highcharts动态向下搜索
动态向下钻取的问题。无法计算使用highcharts获取此图表的动态深入数据的代码。请帮忙Javascript 使用json的Highcharts动态向下搜索,javascript,json,dynamic,highcharts,drilldown,Javascript,Json,Dynamic,Highcharts,Drilldown,动态向下钻取的问题。无法计算使用highcharts获取此图表的动态深入数据的代码。请帮忙 <script type="text/javascript">//<![CDATA[ $(function () { // Create the chart $('#container').highcharts({ chart: { type: 'pie', events: {
<script type="text/javascript">//<![CDATA[
$(function () {
// Create the chart
$('#container').highcharts({
chart: {
type: 'pie',
events: {
drilldown: function (e) {
if (!e.seriesOptions) {
var chart = this,
drilldowns = {
'Animals': {
name: 'Animals',
data: [
['Cows', 2],
['Sheep', 3]
]
},
'Fruits': {
name: 'Fruits',
data: [
['Apples', 5],
['Oranges', 7],
['Bananas', 2]
]
},
'Cars': {
name: 'Cars',
data: [
['Toyota', 1],
['Volkswagen', 2],
['Opel', 5]
]
}
},
series = drilldowns[e.point.name];
// Show the loading label
chart.showLoading('Simulating Ajax ...');
setTimeout(function () {
chart.hideLoading();
chart.addSeriesAsDrilldown(e.point, series);
}, 1000);
}
}
}
},
title: {
text: 'Async drilldown'
},
xAxis: {
type: 'category'
},
legend: {
enabled: false
},
lang: {
drillUpText: '<< Terug naar {series.name}'
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true
}
}
},
series: [{
colorByPoint: true,
data: [{
name: 'Animals',
y: 5,
"drilldown": true
}, {
name: 'Fruits',
y: 2,
drilldown: true
}, {
name: 'Cars',
y: 4,
drilldown: true
}]
}],
drilldown: {
series: []
}
});
});
//
在我的系列中,我已经有了一个json数据,用于名称、y和向下钻取的值。当涉及到“动物”内部的深入数据时,非常困难:{name:'anists',data:['Cows',2],'Sheep',3]}
。
我需要这些的动态数据,请帮助此部分:
if (!e.seriesOptions) {
var chart = this,
drilldowns = {
'Animals': {
name: 'Animals',
data: [
['Cows', 2],
['Sheep', 3]
]
},
'Fruits': {
name: 'Fruits',
data: [
['Apples', 5],
['Oranges', 7],
['Bananas', 2]
]
},
'Cars': {
name: 'Cars',
data: [
['Toyota', 1],
['Volkswagen', 2],
['Opel', 5]
]
}
},
series = drilldowns[e.point.name];
// Show the loading label
chart.showLoading('Simulating Ajax ...');
setTimeout(function () {
chart.hideLoading();
chart.addSeriesAsDrilldown(e.point, series);
}, 1000);
}
这只是一个动态添加钻取的简单示例。您可以使用AJAX调用,如注释中的建议:
if (!e.seriesOptions) {
var chart = this,
series = drilldowns[e.point.name];
// Show the loading label
chart.showLoading('Loading...');
$.get('/my/url', e.point.name, function(data) {
chart.hideLoading();
chart.addSeriesAsDrilldown(e.point, data);
// where data is for example:
// { name: 'Cars', data: [ ['Toyota', 1], ['Volkswagen', 2], ['Opel', 5] ] }
});
}
希望这对其他人有帮助。 如果愿意的话,您可以使用ajax分离数据/json并调用数据,尽管这并不能解决您的问题,但这种方法是有效的
var chartSeriesData = [];
var chartDrilldownData = [];
$.ajax({
type: 'GET',
url: 'db/jsondata.json',
success: function(data) {
var agentJson = data;
for (var i = 0;i <agentJson.agentinfo.length; i++)
{
var series_name = agentJson.agentinfo[i].name;
var drill_id = agentJson.agentinfo[i].drilldown;
var series_data = agentJson.agentinfo[i].y;
var drill_data = agentJson.agentinfo[i].data;
chartSeriesData.push({
name: series_name,
y: parseFloat(series_data),
drilldown : drill_id
});
chartDrilldownData.push({
data : drill_data,
id: drill_id,
name: series_name,
});
}
/// END FOR LOOP
$('#agentInfo').highcharts({
credits: {
enabled: false
},
colors: ['#4B2572', '#8E227D', '#7904e0', '#b726b5', '#64E572', '#ed9cdf', '#f704ce', '#780a84', '#8e4696', '#cd92d3', '#551c5b'],
chart: {
type: 'pie',
backgroundColor:'rgba(255, 255, 255, 0.1)'
},
title: {
text: 'Human Resources'
},
subtitle: {
text: ''
},
plotOptions: {
series: {
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '{point.name}: {point.y:.1f}%',
style: {
color: '#000',
fontWeight: 'bold',
fontSize: '12px',
textShadow: "0px #ffffff"
}
}
}
},
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: [{
name: 'Types',
colorByPoint: true,
data: chartSeriesData
}],
drilldown: {
series: chartDrilldownData
}
});
}
});
问题的核心是什么?据我所知,您只需要一个Ajax调用,而不是
drilldown
2d数组,然后是已经存在的加载过程,但是作为一个成功的回调。此部分的json数组'Fruits':{name:'Fruits',data:[['Apple',5],'Oranges',7],'Bananas',2]]},你好@Pawel,你能在JSFIDLE中发布一个例子吗?这需要后端服务器,我不知道任何解决方案(比如JSFIDLE)提供了这样的功能。我建议基于API的演示:谢谢@Pawel
{
"agentinfo": [
{
"name": "Attendance",
"y": 86.32,
"drilldown": "Attendance",
"data": [
["January", 80.13],
["Febuary", 99.2],
["March", 78.11],
["April", 89.33]
]
},
{
"name": "Absence",
"y": 4.03,
"drilldown": "Absence",
"data": [
["January", 1.3],
["Febuary", 5.7],
["March", 9.6],
["April", 8.5]
]
},
{
"name": "Holidays",
"y": 10.38,
"drilldown" : "Holidays",
"data": [
["January", 5],
["Febuary", 4.32],
["March", 3.68],
["April", 2.96]
]
}
]
}