我的json数据无法显示在高图中。我尝试了不同的json格式,但没有一个无法正常工作。谢谢
当我在控制器中对数据进行硬编码时,代码便可以正常工作。
kasjnc; jnDXKLVBhksbvknxc; k bwirfs; bdjkcb hksb; kjfndkvbw ahibsfkdkvbskcdvkkhbdfshkbvkz; vnxc; v sn; kzvksknfdkbvskjvkcdvkjsfkjdbvskefdkvksdvkjskfdjkbksndjkvcnkwjnesffgjfdjkbhsrbgdfkbkbsvkfbdkj
var getmydata = function() {
var catalogObj = {
"path": '/addons/spsdal/widgets/spsdal-workflow-console/workflow-
graph-json-schema/graph3.json',
"cache": false
};
return $http.get(catalogObj.path, {
cache: false
}).success(function(data, status, headers, config) {
logger.info("GET_BASIC_CATALOG success");
console.log(data);
$scope.mydata = data;
// chartResourceData.drilldownDataSeries=data;
}).
error(function(data, status) {
spsdalRestapiService.displayErrorMsg(data, status);
});
};
getmydata().then(function(datas) {
getGraph2Data(datas);
//alert(data);
});
var getGraph2Data = function(datas) {
var chartResourceData = {};
chartResourceData.chartId = "spsdalHighchartBar";
chartResourceData.chartType = "column";
chartResourceData.chartTitle = "Total Volume of Data Downlink over time";
chartResourceData.chartXAxisTitle = "";
chartResourceData.xAxisCategories =['Jan', 'Feb', 'Mar', 'April', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
chartResourceData.dAxisCategories=['Day1', 'Day2', 'Day3', 'Day4', 'Day5', 'Day6', 'Day7', 'Day8', 'Day9', 'Day9', 'Day10', 'Day11','Day12','Day13','Day14','Day15','Day16','Day17','Day18'];
chartResourceData.chartYAxisTitle = "Volume (C)";
chartResourceData.enableXAxisZoom = true;
var series1Data = { name: 'Airtel',
data: [{
name: 'Jan',
y: 330,
drilldown: 'Jan'
}, 120, 135, 203, 80, 50, 69, 99, 45, 120, 120, 135]
};
var series2Data = { name: 'Vodafone',
data: [{
name: 'Jan',
y: 133,
drilldown: 'Jan'
}, 156, 947, 408, 61, 20, 135, 203, 80, 50, 69, 99] };
chartResourceData.dataSeries = [series1Data,series2Data];
console.log(datas);
chartResourceData.drilldownDataSeries=datas;
return chartResourceData;
};
**and my json data**
{"drilldown":{"series":[{
"name": "Airtel",
"id": "Jan",
"data": [
[
"Day1",
10
],
[
"Day2",
20
],
[
"Day3",
30
],
[
"Day4",
40
],
[
"Day5",
30
],
[
"Day6",
30
],
[
"Day7",
25
],
[
"Day8",
40
],
[
"Day9",
45
],
[
"Day10",
45
],
[
"Day11",
30
],
[
"Day12",
50
],
[
"Day13",
60
],
[
"Day14",
50
],
[
"Day15",
60
],
[
"Day16",
70
],
[
"Day17",
80
],
[
"Day18",
90
],
[
"Day19",
40
],
[
"Day20",
50
]
]
}]
}
}
还有我正在处理数据的控制器。
var converToHighcharts = function(dashboardData) {
var graphConfigData = {};
graphConfigData.id = dashboardData.chartId;
graphConfigData.credits = {enabled: false };
graphConfigData.chart = {};
graphConfigData.chart.type = dashboardData.chartType;
graphConfigData.title = {};
graphConfigData.title.text = '';//dashboardData.chartTitle;
$scope.title=dashboardData.chartTitle;
graphConfigData.subtitle ={};
graphConfigData.subtitle.text = '';
graphConfigData.xAxis = {};
/* this exporting to disable default export button*/
graphConfigData.exporting= {
enabled: false
};
graphConfigData.xAxis.categories = dashboardData.xAxisCategories;
var index=_.findIndex($scope.selectbox, function(o) { return o.graphType == dashboardData.chartType; });
if(index>-1){
$scope.selectedChartName=$scope.selectbox[index].name;
$scope.selectedIcon=$scope.selectbox[index].icon;
}
$scope.chartType=dashboardData.chartType;
if (dashboardData.chartType == 'areaspline') {
graphConfigData.xAxis.plotBands = [{
from: 4.5,
to: 6.5,
color: 'rgba(68, 170, 213, .2)'
}];
graphConfigData.chart = { zoomType: 'x' };
graphConfigData.plotOptions = { areaspline: { fillOpacity: 0.5 } }
} else if (dashboardData.chartType == 'pie') {
graphConfigData.plotOptions = {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
// format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
}
}
graphConfigData.xAxis.title = {};
graphConfigData.xAxis.title.text = dashboardData.chartXAxisTitle;
graphConfigData.yAxis = {};
graphConfigData.yAxis.min = 0;
graphConfigData.yAxis.title = {};
graphConfigData.yAxis.title.text = dashboardData.chartYAxisTitle;
graphConfigData.yAxis.labels = {};
graphConfigData.yAxis.labels.overflow = 'justify';
graphConfigData.yAxis.tooltip = {};
graphConfigData.yAxis.tooltip.valueSuffix = dashboardData.chartYAxisValueSuffix;
graphConfigData.plotOptions = {};
graphConfigData.plotOptions.bar = {};
graphConfigData.plotOptions.bar.dataLabels = {};
graphConfigData.plotOptions.bar.dataLabels.enabled = true;
// graphConfigData.legend = {
// layout: 'vertical',
// align: 'right',
// verticalAlign: 'top',
// x: -40,
// y: 80,
// floating: true,
// borderWidth: 1,
// backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
// shadow: true
// };
graphConfigData.series= [];
if (dashboardData.chartType == 'line') {
for (var i=0;i<dashboardData.dataSeries.length;i++) {
for(var j=0;j<dashboardData.dataSeries[i].data.length;j++) {
dashboardData.dataSeries[i].data[j].name = {};
dashboardData.dataSeries[i].data[j].name = dashboardData.dataSeries[i].data[j].x;
delete dashboardData.dataSeries[i].data[j].x;
}
graphConfigData.series.push(dashboardData.dataSeries[i]);
}
} else if (dashboardData.chartType == 'pie'){
for (var i=0;i<dashboardData.dataSeries.length;i++) {
graphConfigData.series.push(dashboardData.dataSeries[i]);
}
} else {
for (var i=0;i<dashboardData.dataSeries.length;i++) {
graphConfigData.series.push(dashboardData.dataSeries[i]);
}
}
if (dashboardData.drilldownDataSeries) {
graphConfigData.drilldown = dashboardData.drilldownDataSeries;
graphConfigData.xAxis.categories=dashboardData.dAxisCategories;
}
// if (dashboardData.addSeriesAsDrilldown) {
// graphConfigData.drilldown = dashboardData.addSeriesAsDrilldown;
// graphConfigData.xAxis.categories=dashboardData.dAxisCategories;
// }
return graphConfigData;
};