highcharts与ajax的应用

整理一份完整的例子,以供参考:

<1>页面chart.html:

<span style="font-size:14px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
  <head>  
    <title>highchart折线图</title>  
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>  
    <script src="highcharts.js"></script>  
    <script type="text/javascript">  
        var xset = [];//X轴数据集  
        var yset = [];//Y轴数据集  
        /*返回数据*/  
        function getData(){  
            $.getJSON('com/ChartServlet',function(data){  
                $.each(data,function(i,item){  
                    $.each(item,function(k,v){  
                        xset.push(k);  
                        yset.push(v);  
                    });  
                })  
                console.log(xset);   
                console.log(yset);   
                //根据时间序列生成折线图  
                showChart(xset,yset);  
            });  
        }  
        /*定义图表*/  
        function showChart(xset,yset){  
            var chart = new Highcharts.Chart({  
                chart: {  
                    renderTo: 'linecontainer',  
                    type: 'line',  
                    marginRight: 130,  
                    marginBottom: 25  
                },  
                  
                xAxis: {  
                    categories: xset  
                },  
                yAxis: {  
                    title: {  
                        text: '数据'  
                    },  
                    plotLines: [{  
                        value: 0,  
                         1,  
                        color: '#808080'  
                    }]  
                },  
                tooltip: {  
                    formatter: function() {  
                            return '<b>'+ this.series.name +'</b><br/>'+  
                            this.x +': '+ this.y;  
                    }  
                },  
                legend: {  
                    layout: 'vertical',  
                    align: 'right',  
                    verticalAlign: 'top',  
                    x: -10,  
                    y: 100,  
                    borderWidth: 0  
                },  
                series: [{  
                    name: '随机时间序列',  
                    data: yset  
                }]  
            });  
        }  
          
        //执行  
        getData();  
    </script>  
      
  </head>  
    
  <body>  
          <!-- 图表显示区 -->  
           <div id="linecontainer" style=" 1200px; height: 300px"></div>  
  </body>  
</html></span>  
原文地址:https://www.cnblogs.com/kennyliu/p/3920386.html