admin 管理员组

文章数量: 887006

使用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=".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数据发到前端。

参考博客地址：.html

转载于:.html

本文标签： 使用highcharts动态绘制折线图so easy

版权声明：本文标题：使用highcharts动态绘制折线图——so easy 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1732360048h1534958.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。