使用highcharts动态绘制折线图—

使用highcharts动态绘制折线图——so easy

之前学习highcharts发现网上的教程大部分是对highcharts数据的注释，如何动态绘制数据大部分一笔带过，让那些初涉开发的小白云里雾里，所以我就写了一篇这样的博客。

<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
                <title>测试</title>
        <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
        <script src="js/highcharts.js"></script>
        <script src="js/exporting.js"></script>
        <script>
            var chart; 
$(function() { 
     var url="test.php";// 后台路径
                var std=document.getElementById('std').value;
                var end=document.getElementById('end').value;
                var day="";
                var beij="";
                var  guangz="";
                $.ajax({
              type: "POST",
              url: url,
             async:false,// 异步发送数据,默认是true，如果不加可能会出错
              data: {"std":std,"end":end},
              success: function(data){
                                var dat=JSON.parse(data);
                                day=dat.day;
                                beij=dat.beij;
                                guangz=dat.guangz;
                               
              }
          });
    $('#container').highcharts({ 
        chart: { 
            renderTo: 'chart_line', //图表放置的容器，DIV 
            defaultSeriesType: 'line', //图表类型line(折线图), 
            zoomType: 'x'   //x轴方向可以缩放 
        }, 
        credits: { 
            enabled: false   //右下角不显示LOGO 
        }, 
        title: { 
            text: '主要城市月平均气温' //图表标题 
        }, 
        subtitle: { 
            text: '2011年'  //副标题 
        }, 
        xAxis: {  //x轴 
            categories: day, //x轴标签名称 
            gridLineWidth: 1, //设置网格宽度为1 
            lineWidth: 2,  //基线宽度 
            labels:{y:26}  //x轴标签位置：距X轴下方26像素 
        }, 
        yAxis: {  //y轴 
            title: {text: '平均气温(°C)'}, //标题 
            lineWidth: 2 //基线宽度 
        }, 
        plotOptions:{ //设置数据点 
            line:{ 
                dataLabels:{ 
                    enabled:true  //在数据点上显示对应的数据值 
                }, 
                enableMouseTracking: false //取消鼠标滑向触发提示框 
            } 
        }, 
        legend: {  //图例 
            layout: 'horizontal',  //图例显示的样式：水平（horizontal）/垂直（vertical） 
            backgroundColor: '#ffc', //图例背景色 
            align: 'left',  //图例水平对齐方式 
            verticalAlign: 'top',  //图例垂直对齐方式 
            x: 100,  //相对X位移 
            y: 70,   //相对Y位移 
            floating: true, //设置可浮动 
            shadow: true  //设置阴影 
        }, 
        exporting: { 
            enabled: false  //设置导出按钮不可用 
        }, 
        series: [{  //数据列 
            name: '北京', 
            data: beij 
        }, 
        { 
            name: '广州', 
            data: guangz
        }] 
    }); 
});
        </script>
    </head>
    <form action="#" method="post">
        <span id="sp2">
                开始时间:<input type="text" name="startDay" id="std"/>
                结束时间：<input type="text" name="endDay" id="end"/> 
                </span>
                <input type="submit" value="查询" name="chaxun"/>
</form>
    <div id="container" style="min- 310px; height: 400px;"></div>
</html>

在后台的代码我就不贴了，无非就是判断一下起始时间和结束时间是否为空，如果不为空就从数据库中查出来，使用将数据转化成json数据发到前端。

参考博客地址：http://www.helloweba.com/view-blog-157.html