使用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-width: 310px; height: 400px;"></div> </html>
在后台的代码我就不贴了，无非就是判断一下起始时间和结束时间是否为空，如果不为空就从数据库中查出来，使用将数据转化成json数据发到前端。
参考博客地址：http://www.helloweba.com/view-blog-157.html
