Linux Server 安全相关设置
2014-04-02 11:24
218 查看
上一节已经完讲了后台的相关服务,现在以及可能接下来的讲的是如何将数据传输到具体的图形展示中。
首先来一个最简单的,将x轴的数据从数据库中取出:
我一向懒得传图,但是那样不直观,今天打破规矩好了,先见识一下数据表xasix:
非常简单吧! 好下面我们先看展示图再来看源代码:
源代码来啦~
细心的童鞋发现其实曲线中的数据也是同样的方法取出来的,对伐?见dataXRand()
然后我想将不同类型的,最近自己试验出来的成功都贴出来,供自己记录,也共勉。
本文出自 “前端之路” 博客,请务必保留此出处http://baigungun.blog.51cto.com/6736785/1312743
首先来一个最简单的,将x轴的数据从数据库中取出:
我一向懒得传图,但是那样不直观,今天打破规矩好了,先见识一下数据表xasix:
非常简单吧! 好下面我们先看展示图再来看源代码:
源代码来啦~
<!doctype html> <html> <head> <meta charset="utf-8"> <title>line估</title> <script src="js/esl.js"></script> <script src="js/jquery-1.7.1.js"></script> <script type="text/javascript"> //ajax获取后台数据,x轴的name从数据库中读取 function fetchXname(){ var arr=new Array(); $.ajax( { url:"./control/AjaxService.php?method=GetXaxisname", dataType:"text", success:function(data) { //调用函数获取值,转换成数组模式 var ss=eval(data); for(var i=0;i<ss.length;i++) { arr.push(ss[i].name); } } }); return arr; } function dataXRand(){ var dataarr=new Array(); $.ajax({ url:"./control/AjaxService.php?method=RandTest", dataType:"text", success:function(data) { var ss=eval(data); for(var i=0;i<ss.length;i++) { dataarr.push(ss[i]); //alert(dataarr[i]); } } }); return dataarr; } require.config({ packages:[ { name:'echarts', location:'echarts-master/src', main:'echarts' }, { name:'zrender', location:'zrender-master/src', main:'zrender' } ] }); option = { title : { text: '未来一周气温变化', subtext: '纯属虚构' }, tooltip : { trigger: 'axis' }, legend: { data:['最高气温','最低气温'] }, toolbox: { show : true, feature : { mark : true, dataView : {readOnly: false}, magicType:['line', 'bar'], restore : true, saveAsImage : true } }, calculable : true, xAxis : [ { type : 'category', boundaryGap : false, data : fetchXname() } ], yAxis : [ { type : 'value', axisLabel : { formatter: '{value} °C' }, splitArea : {show : true} } ], series : [ { name:'最高气温', type:'line', itemStyle: { normal: { lineStyle: { shadowColor : 'rgba(0,0,0,0.4)' } } }, data:dataXRand() }, { name:'最低气温', type:'line', itemStyle: { normal: { lineStyle: { shadowColor : 'rgba(0,0,0,0.4)' } } }, data:[-2, 1, 2, 5, 3, 2, 0] } ] }; require( [ 'echarts', 'echarts/chart/line' ], function(ec){ var myChart=ec.init(document.getElementById('main')); myChart.setOption(option); } ) </script> </head> <body> <div id="main" style="height:500px; border:1px solid #ccc; padding:10px;"></div> </body> </html>
细心的童鞋发现其实曲线中的数据也是同样的方法取出来的,对伐?见dataXRand()
然后我想将不同类型的,最近自己试验出来的成功都贴出来,供自己记录,也共勉。
本文出自 “前端之路” 博客,请务必保留此出处http://baigungun.blog.51cto.com/6736785/1312743
相关文章推荐
- Linux驱动程序学习备忘之三
- Linux SSH 常用命令 1
- linux awk数组相关操作介绍
- Linux 下挂载硬盘的 方法
- 虚拟机VMware下安装CentOS6.4
- Linux C/C++ 内存泄漏检测工具:Valgrind
- Linux环境下bind9.2.3域名服务器的安装
- SUSE Linux 技术小贴士 - 201404
- linux下对mysql的一些操作
- linux c++线程池框架
- Centos Mysql安装整理
- redhat linux 5.3修改Java环境变量
- linux上svn解决冲突的办法
- 使用 udev 高效、动态地管理 Linux 设备文件
- Linux开发环境下的动态库和静态库
- Linux 下计时方式
- linux下各种格式软件包的安装
- Linux下C/C++编程入门----Linux安装教程
- Linux中socket 错误编码表 errno
- Linux "ls -l"文件列表权限详解