前段时间自己做项目的时候用到Highcharts框架,在基础柱图的时候遇到了问题,经过不断尝试,最终成功显示,把代码贴出来供大家参考。
先贴出最后效果,然后来讲一下我遇到的问题。
1.关于两类柱状图的实现
官方的demo里面是直接写的,我刚开始想从后台传json拿到name,然后set到series里面,但是经过多次尝试,失败,所以这里series里的name就直接在前台写死。
series : [ {name : '收入'},
{name : '支出'} ]
2.关于动态X轴的实现
我这里的X轴是在上方的datebox里选的时间往后面传的,连续的日期是在后台获得了开始日期和结束日期,创建了一个数组,然后把数组放在json字符串里面穿到的前台
for (var j = 0; j < length; j++) {
$('#year').highcharts().xAxis[0].categories.push(dayX[j]);
}
以下是column chart的代码
$(function() {
/*每个月的收入和支出比*/
$('#year')
.highcharts(
{
chart : {
type : 'column'
},
title : {
text : '收入支出表'
},
xAxis : {
categories : [ '一月', '二月', '三月', '四月',
'五月', '六月', '七月', '八月', '九月', '十月',
'十一月', '十二月' ],
crosshair : true
},
yAxis : {
min : 0,
title : {
text : '金额(元)'
}
},
tooltip : {
headerFormat : '<span style="font-size:10px">{point.key}</span><table>',
pointFormat : '<tr><td style="color:{series.color};padding:0">{series.name}: </td>'
+ '<td style="padding:0"><b>{point.y:.1f}元</b></td></tr>',
footerFormat : '</table>',
shared : true,
useHTML : true
},
plotOptions : {
column : {
pointPadding : 0.2,
borderWidth : 0
}
},
series : [ {name : '收入'},
{name : '支出'} ]
});
$.ajax({
type : "GET",
url : 'chart/year',
dataType : 'json',
success : function(result) {
var data = new Array();
for (var i = 0; i < 2; i++) {
data[i] = new Array();
for (var j = 0; j < 12; j++) {
data[i].push(result[i].data[j]);
}
}
$('#year').highcharts().series[0].setData(data[0]);
$('#year').highcharts().series[1].setData(data[1]);
},
});
});
var beginSearchColumn = function() {
$('#year')
.highcharts(
{
chart : {
type : 'column'
},
title : {
text : '月收入支出'
},
xAxis : {
categories : [],
crosshair : true
},
yAxis : {
min : 0,
title : {
text : '金额(元)'
}
},
tooltip : {
headerFormat : '<span style="font-size:10px">{point.key}</span><table>',
pointFormat : '<tr><td style="color:{series.color};padding:0">{series.name}: </td>'
+ '<td style="padding:0"><b>{point.y:.1f}元</b></td></tr>',
footerFormat : '</table>',
shared : true,
useHTML : true
},
plotOptions : {
column : {
pointPadding : 0.2,
borderWidth : 0
}
},
series : [ {
name : '收入'
}, {
name : '支出'
} ]
});
var beginTime = $('#beginTimeColumn').datebox('getValue');
var endTime = $('#endTimeColumn').datebox('getValue');
$.ajax({
type : "GET",
url : 'chart/selectByTime',
data : "beginTime=" + beginTime + "&endTimeString=" + endTime,
dataType : 'json',
success : function(result) {
if (result[0].month !== undefined) {
var data = new Array();
var monthX = new Array();
var length = result[0].month.length;
for (k = 0; k < length; k++) {
monthX.push(result[0].month[k]);
}
for (var j = 0; j < length; j++) {
$('#year').highcharts().xAxis[0].categories
.push(monthX[j]);
}
for (var i = 0; i < 2; i++) {
month[i] = [];
for (var j = 0; j < length; j++) {
data[i].push(result[i].data[j]);
}
}
$('#year').highcharts().series[0].setData(data[0]);
$('#year').highcharts().series[1].setData(data[1]);
} else if (result[0].day == null) {
var data = new Array();
for (var i = 0; i < 2; i++) {
data[i] = new Array();
for (var j = 0; j < 12; j++) {
data[i].push(result[i].data[j]);
}
}
for (var j = 1; j < 13; j++) {
$('#year').highcharts().xAxis[0].categories.push(j
+ "月");
}
$('#year').highcharts().series[0].setData(data[0]);
$('#year').highcharts().series[1].setData(data[1]);
} else {
var data = new Array();
var dayX = new Array();
var length = result[0].day.length;
for (k = 0; k < length; k++) {
dayX.push(result[0].day[k]);
}
for (var j = 0; j < length; j++) {
$('#year').highcharts().xAxis[0].categories
.push(dayX[j]);
}
for (var i = 0; i < 2; i++) {
data[i] = new Array();
for (var j = 0; j < length; j++) {
data[i].push(result[i].data[j]);
}
}
$('#year').highcharts().series[0].setData(data[0]);
$('#year').highcharts().series[1].setData(data[1]);
}
},
})
}