Highcharts-多条折线图（静态、动态）

1：引入加包Highcharts-2.2.5
2：jsp中引入

<script type="text/javascript" src="${pageContext.request.contextPath}/res/Highcharts-2.2.5/js/jquery.heighcharts.min.js" charset="utf-8"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/res/Highcharts-2.2.5/js/highcharts.src.js" charset="utf-8"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/res/Highcharts-2.2.5/js/modules/exporting.src.js" charset="utf-8"></script>

3：

javascript代码：

$(function () {
    $('#container').highcharts({
        title: {
            text: 'Monthly Average Temperature',
            x: -20 //center
        },
        subtitle: {
            text: 'Source: WorldClimate.com',
            x: -20
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun','Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
            title: {
                text: 'Temperature (°C)'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: '°C'
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        series: [{
            name: 'Tokyo',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
        }, {
            name: 'New York',
            data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
        }, {
            name: 'Berlin',
            data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
        }, {
            name: 'London',
            data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
        }]
    });
});

4：动态实现代码

定义chart

var chart = Ext.create('Ext.panel.Panel', {
                height : 320,
                title : "多开统计",
                html : '<div id="container"></div>'
            });

chart = new Highcharts.Chart({
                chart : {
                    renderTo : 'container',
                    type : 'line',
                    height : 300
                },
                title : {
                    text : "多开统计"
                },
                xAxis : {
                    categories : []
                },
                yAxis : {
                    title : {
                        text : '数量'
                    },
                    min : 0
                },
                exporting : {
                    enabled : false
                },
                tooltip : {
                    formatter : function() {
                        return '<b>' + this.series.name + '</b><br>' + '日期:'
                                + this.x + '<br>数量:' + this.y;
                    }
                }
            });

function tochart() {
        // 获取查询条件
        var fp = queryForm;
        var queryParam = {};
        var date = fp.getForm().getValues()["date"];
        queryParam["date"] = date;
        var n = fp.getForm().getValues()["n"];
        queryParam["n"] = n;//传参date&n
        // 查询后台数据
        Ext.Ajax.request({
            url : WebPath + '/baobiao/findDuoKai',
            params : queryParam,
            method : "POST",
            success : function(response) {
                // 转换数据反回值为对象
                var datas = Ext.decode(response.responseText);
                if (datas["total"] < 0) {
                    return;
                }
                // 清空chart内的数据
                var size = chart.series.length;
                for (var i = 0; i < size; i++) {
                    chart.series[0].remove();
                }
                // 排序
                datas["rows"].sort(function(a, b) {
                            a = a['date'].split('-');
                            b = b['date'].split('-');
                            return Date.UTC(a[0], a[1], a[2])
                                    - Date.UTC(b[0], b[1], b[2]);
                        });
                // 获取 开始日期 和 结束日期
                var begin = CTU.Utils.parseDate(queryParam['date'][0]);
                var end = CTU.Utils.parseDate(queryParam['date'][1]);
                var categories = [];
                // 选中数据中去除重复项
                var n = CTU.Utils.arrayUnique(queryParam['n']);
                var names = [];//每个线条的名字
                Ext.Array.each(datas["rows"], function(item, b) {
                            var find = 0;
                            for (var k = 0; k < names.length; k++) {
                                if (names[k] == item['name']) {
                                    find = 1;
                                }
                            }
                            if (find == 0) {
                                names.push(item['name']);
                            }
                        });
                // 设置X轴范围
                for (var i = begin; i <= end; i = i + 3600000 * 24) {
                    categories.push(Ext.Date.format(new Date(i), 'Y-m-d'));
                }
                chart.xAxis[0].setCategories(categories);
                // 设置数据内容
                Ext.Array.each(names, function(name, b) {

                            var resultObj = {};
                            resultObj['name'] = name;
                            resultObj['data'] = [];
                            for (var i = begin; i <= end; i = i + 3600000 * 24) {
                                var isFind = 0;
                                Ext.Array.each(datas["rows"],
                                        function(item, b) {
                                            if (name == item['name']
                                                    && i == CTU.Utils
                                                            .parseDate(item['date'])) {
                                                resultObj['data']
                                                        .push(item['count']);
                                                isFind = 1;
                                            }
                                        });
                                if (isFind == 0) {
                                    resultObj['data'].push(0);
                                }
                            }
                            chart.addSeries(resultObj);
                        });
            }
        });