您的位置:首页 > 运维架构 > Linux

Linux Server 安全相关设置

2014-04-02 11:24 218 查看
上一节已经完讲了后台的相关服务,现在以及可能接下来的讲的是如何将数据传输到具体的图形展示中。
首先来一个最简单的,将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
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: