web 开发jquery插件之Highcharts【一款统计的报表插件】

插件之Highcharts【一款统计的报表插件】"/>

web 开发jquery插件之Highcharts【一款统计的报表插件】

1.下载及api 地址

/

2.折线图demo,api 已经存在的demo省略，文档说明省略，只记录略微复杂的demo。

3. 控制层传到页面的数据格式，json. 

    如:

折线图数据：[{"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});}});}