1.下载及api 地址
2.折线图demo,api 已经存在的demo省略,文档说明省略,只记录略微复杂的demo。
3. 控制层传到页面的数据格式,json.
Object 转json,最快的使用com.alibaba.fastjson.JSONObject.toJSONString(object);如:
折线图数据:[{"data":[1.03,1.05,1.13,1.07,1.14,1.05,1.06,1.01,1.03,1.05,1.09,0.80,0.92,0.94,0.91,0.94,0.98,1.00],"date":["2014-02-03","2014-02-04","2014-02-05","2014-02-06","2014-02-07","2014-02-08","2014-02-09","2014-02-10","2014-02-11","2014-02-12","2014-02-13","2014-02-14","2014-02-15","2014-02-16","2014-02-17","2014-02-18","2014-02-19","2014-02-20"],"name":"嘉实增长"},{"data":[1.06,1.04,1.05,1.06,1.08,1.07,1.08,1.04,1.05,1.06,0.80,0.90,1.10,0.90,1.30,1.13,1.00,0.80],"date":["2014-02-03","2014-02-04","2014-02-05","2014-02-06","2014-02-07","2014-02-08","2014-02-09","2014-02-10","2014-02-11","2014-02-12","2014-02-13","2014-02-14","2014-02-15","2014-02-16","2014-02-17","2014-02-18","2014-02-19","2014-02-20"],"name":"嘉实服务"}]
4. 页面使用ajax 异步请求,控制层response.getWriter().write(json)
5.页面异步请求。
function loadChart(){
var url = "/loadChart.do?product="+jQuery("[name='product']").val()
+"&s="+jQuery("[name='beginTime']").val()
+"&e="+jQuery("[name='endTime']").val();
jQuery.ajax({
url: url,
dataType:"json",
type: "post",
error : function(xhr, text) {
// alert(text);
},
success: function(data) {
jQuery("#div1").empty();
jQuery("#div1").highcharts({
chart: {
defaultSeriesType: 'line',//折线图
zoomType: 'x'
},
colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655',
'#FFF263', '#6AF9C4'],//改变默认的折线颜色
title: {
text: '累计净值走势图',//折线图标题
x: -20 //center
},
subtitle: {
text: '',//副标题,会出现在主标题的下方
x: -20
},
xAxis: {
gridLineWidth:0,
lineWidth:1.5,
minorTickInterval: 'auto',//设置是否出现纵向小标尺
///max: 6,//标签个数
tickInterval:calculate2(jQuery("#dataType").val()),//计算横轴每隔多少天显示一个标度
categories: data[0].date
},
yAxis: {
gridLineWidth:0,
lineWidth:1.5,
title: {
text: ''
},
plotLines: [
{
value: 5,
width: 0,
color: '#808080'
}
]
},
tooltip: {//数据点的提示框
valueSuffix: ''
},
credits: { //版权是否显示
enable: false,
text: ""
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
borderWidth: 0
},
series:data//控制层response.getWriter().write的json data
});
}
});
}