使用 json 的 Highcharts 动态钻取
Highcharts Dynamic Drilldown using json
动态向下钻取时出现问题。无法计算使用高图表获取此图表的动态明细数据的代码。请帮忙
<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 和钻取的值。 当涉及到'Animals':{ name: 'Animals', 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] ] }
});
}
希望这对其他人有所帮助。如果你愿意，你可以，虽然这不能解决你的问题，但这种方法有效，分离数据/json并使用ajax调用数据。
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
}
});
}
});
json 数据的结构如下：
{
"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]
]
}
]
}
相关文章：
- 带有向下钻取的 Amchart 图表工作正常，但“后退”按钮不起作用
- 如何通过向下钻取制作高图表箱形图
- 使用 json 的 Highcharts 动态钻取
- 使用nodejs和phantomjs进行动态抓取
- Highcharts甜甜圈工具提示格式使用钻取数据
- 章节文本标签没有't显示在D3.JS向下钻取饼图中
- Highchart向下钻取到同时存在的多个系列和y轴
- 动态钻取嵌套的对象数组
- 高位图向下钻取不起作用
- 具有向下钻取的 Highcharts 列会导致主图表中的数据标签模糊，但向下钻取的列除外
- 数据表 - 忽略使用 colspan 向下钻取的行
- 带有“日期时间”x轴的图表 - 在向下钻取时使用类别
- 钻取$scope以获取复杂的自动完成DOM中的特定元素
- 突出显示:在向下钻取之前获取事件
- amCharts多级向下钻取
- 原生脚本中的动态抓取?需要抓取页面，能够单击HTML按钮
- 高图钻取问题
- HighCharts:具有向下钻取功能的动态数据
- 向上钻取时，将数据动态地添加到图表的顶层
- HighChart动态向下钻取
