我使用下面的代码显示区域图表,并使用ajax函数从数据库传递系列值和类别值。
这个变量YEAR,POSITION_TYPE,POSITION_SALARY
我需要传递区域图series:name,data,xAxis: formatter
但是,我的图表没有以正确的格式显示。 那么如何将此变量传递给系列:name,data& xAxis:动态格式化。
//This is Result variable data
(4) [{…}, {…}, {…}, {…}]
0:{POSITION_TYPE: "Permanent", POSITION_SALARY: "9000", YEAR: "2015"}
1: {POSITION_TYPE: "Permanent", POSITION_SALARY: "13000", YEAR: "2016"}
2: {POSITION_TYPE: "Permanent", POSITION_SALARY: "1000", YEAR: "2017"}
3: {POSITION_TYPE: "Permanent", POSITION_SALARY: "187333", YEAR: "2018"}
length: 4__proto__: Array(0)
// begin area chart
$.ajax({
type: "GET",
url: "/api/ReportAPI/Get_Area_Chart_FTE_PAYROLL_DETAILS",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (Result) {
var data = [];
var categories = [];
for (var i in Result) {
var serie = new Array(Result[i].YEAR);
//var serie = Result[i].YEAR;
// alert(serie);
console.log(serie);
categories.push(serie);
var fte = {
name: Result[i].POSITION_TYPE,
data: JSON.parse("[" + Result[i].POSITION_SALARY + "]")
};
data.push(fte);
}
DreawAreaChart(categories, data);
},
failure: function (response) {
alert(response.responseText);
},
error: function (response) {
alert(response.responseText);
}
});
function DreawAreaChart(categories, dataArray) {
//alert(categories);
Highcharts.chart('container3', {
chart: {
type: 'area'
},
title: {
text: 'Employee FTE and Payroll Details'
},
subtitle: {
//text: 'Source: WorldClimate.com'
},
xAxis: {
allowDecimals: false,
labels: {
//formatter: function () {
// alert(this.value);
// return this.value; // clean, unformatted number for year
//}
formatter: function () {
// alert(this.value);
//categories = [];
//for (var i = 0; i < categories.length; i++) {
// alert(categories[i]);
// return categories[i];
//}
return categories;
// clean, unformatted number for year
}
//formatter:categories
//formatter: function (categories) {
// for (var i in categories) {
// // var serie = new Array(Result[i].YEAR);
// var serie = categories[i].YEAR; alert(serie);
// return serie; // clean, unformatted number for year
// }
//}
}
},
yAxis: {
title: {
text: 'Salary'
},
labels: {
formatter: function () {
return this.value / 1 + 'k';
}
}
},
tooltip: {
pointFormat: '{series.name} produced <b>{point.y:,.0f}</b><br/>yearly in {point.x}'
},
plotOptions: {
area: {
pointStart: 1950,
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
}
}
},
series: dataArray
});
}
// End area chart