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

1.下载及api 地址

http://www.highcharts.me/

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
                });
            }
        });
    }