Highchart折线图代码
$(function () {
var chartLine = new Highcharts.Chart({
chart: {
type: 'line',
<em><span style="color:#ff0000;">renderTo: 'container2'</span></em>
},
title: {
text: '上月已还款金额与本月账单金额对比结果'
},
subtitle: {
text: ''
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: '单位 (元)'
}
},
tooltip: {
enabled: false,
formatter: function () {
return '<b>' + this.series.name + '</b><br>' + this.x + ': ' + this.y + '°C';
}
},
plotOptions: {
line: {
dataLabels: {
enabled: true
},
enableMouseTracking: false
}
},
series: [{
name: '上月还款金额',
data: []
}, {
name: '本月消费金额',
data: []
}]
});
function getFormLine() {
return $http.get("/billsDetail/twoMonthChartData").success(function (response) {
//为图表设置值
<strong><span style="color:#ff0000;">chartLine.series[0].setData(response.data.lastMonth);
chartLine.series[1].setData(response.data.thisMonth);
chartLine.xAxis[0].setCategories(eval(response.data.categorys));</span></strong>
}).error(function (response) {
$log.debug("请求超时或网络故障!获得列表失败!")
});
}
getFormLine();
});
后端拼JSON代码
public JSONObject listLastMonthAndThismonthBillsData() {
JSONObject json =new JSONObject();
List<String> categorys =new ArrayList<String>();
List<Double> lastMonthData=new ArrayList<Double>();
List<Double> thisMonthData=new ArrayList<Double>();
String sql="select lastmonth_repayment,thismonth_bill,period from credit_card_bills order by period asc " ;
List<JSONObject> resultdata = billsDetailDao.list(sql);
for(JSONObject dataItem:resultdata)
{
categorys.add(dataItem.getString("period"));
lastMonthData.add(dataItem.getDouble("lastmonth_repayment"));
thisMonthData.add(dataItem.getDouble("thismonth_bill"));
}
json.put("categorys",categorys);
json.put("lastMonth",lastMonthData);
json.put("thisMonth",thisMonthData);
return json;
}
HTML代码
<div id="container2">
</div>
效果图