D3.js学习笔记十一:使用JSON作为动态数据源

2015年02月15日 javascript 暂无评论 阅读 6,342 views 次
D3.js学习笔记十一:使用JSON作为动态数据源

要解决的问题

从静态数据到读取文本,这些都不是我们想要的,我们使用动态图表,主要是为了展现从数据库里面读取的内容,如果不能接受数据库数据,那多绚丽的效果都是渣!D3.js能够接受XML数据和Json数据,这个对于开发来讲,才是最强大的。本来嘛,通过js读取Json,这个就是绝配,关于Json,百度百科里面这样解释:

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于JavaScript(Standard ECMA-262 3rd Edition - December 1999)的一个子集。 JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C, C++, C#, Java, JavaScript, Perl, Python等)。这些特性使JSON成为理想的数据交换语言。易于人阅读和编写,同时也易于机器解析和生成。

json简单说就是javascript中的对象和数组,所以这两种结构就是对象和数组两种结构,通过这两种结构可以表示各种复杂的结构。

1、对象:对象在js中表示为"{}"括起来的内容,数据结构为 {key:value,key:value,...}的键值对的结构,在面向对象的语言中,key为对象的属性,value为对应的属性值,所以很容易理解,取值方法为 对象.key 获取属性值,这个属性值的类型可以是 数字、字符串、数组、对象几种。

2、数组:数组在js中是中括号"[]"括起来的内容,数据结构为 ["java","javascript","vb",...],取值方式和所有语言中一样,使用索引获取,字段值的类型可以是 数字、字符串、数组、对象几种。

经过对象、数组2种结构就可以组合成复杂的数据结构了。

读取Json数据的方法

读取Json,要使用d3.json(url,[function(error,data){}])方法,直接将数据读到程序中,例如下面的代码读取当前目录下makeJson.php并将结果格式化后保存到data变量里面,注意要测试这个功能,需要将代码放置在服务器目录下使用WEB URL(类似http://localhost/test.html)进行测试

d3.json("makeJson.php",function(error,data)
{
var dataset=[];
var xMark=[];
data.forEach(function(d)
{
dataset.push(d.revenue);
str=d.postdate;
str = str.replace(/-/g,"/");
var date = new Date(str);
xMark.push(date.getDate());
});....其它事件处理代码....

});

数据存放在sqlite数据库里面,结构很简单,就是两列:提交时间(postdate)、销售额(renenue),因为php本身提供了JSON包装的函数,使用如下代码读取数据并封装。

读取数据并用折线图显示出来

读取外部数据,因为是异步执行的,需要将数据处理以及数据应用代码放置在数据结果处理函数中,否则可能因为异步数据,导致代码执行时数据还没有读到,因此引发不可测的后果。示例代码如:下

//读取JSON数据
d3.json("makeJson.php",function(error,data)
{
var dataset=[];
var xMark=[];
data.forEach(function(d)
{
dataset.push(d.revenue);
str=d.postdate;
str = str.replace(/-/g,"/");
var date = new Date(str);
xMark.push(date.getDate());
});var chart=new magicdataLine(10,10);
chart.w=1000;
chart.title="从JSON中读取的数据";
chart.subTitle="时间:2013年1月 指标名称:销售额";
chart.dataset=[dataset];
chart.xMarks=xMark;
chart.lineNames=["系列1"];
chart.draw();
});

将读取到的数据放置在两个数组中,然后用它们作图,横坐标的标签我们取日期的"日"标签。

11_1

示例文件地址:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>读取JSON数据画一个折线图</title>
<script type="text/javascript" src="js/d3.js"></script>
<script type="text/javascript" src="js/msgicdataLine.js"></script>
</head>
<style type="text/css">
body{
height: 100%;
}
.title{font-family:Arial,微软雅黑;font-size:18px;text-anchor:middle;}
.subTitle{font-family:Arial,宋体;font-size:12px;text-anchor:middle;fill:#666}
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
fill:#999;
}
.inner_line path,
.inner_line line {
fill: none;
stroke:#E7E7E7;
shape-rendering: crispEdges;
}
.legend{font-size: 12px; font-family:Arial, Helvetica, sans-serif}
.tiptools
{
display:block;
background-color:#FFF;
border:1px solid #E7E7E7;
padding:10px;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
cursor:pointer;
}
</style>
<body>
<script type="text/javascript">
//读取JSON数据
d3.json("makeJson.php",function(error,data)
{
var dataset=[];
var xMark=[];
data.forEach(function(d)
{
dataset.push(d.revenue);
str=d.postdate;
str = str.replace(/-/g,"/");
var date = new Date(str);
xMark.push(date.getDate());
});
var chart=new magicdataLine(10,10);
chart.w=1000;
chart.title="从JSON中读取的数据";
chart.subTitle="时间:2013年1月 指标名称:销售额";
chart.dataset=[dataset];
chart.xMarks=xMark;
chart.lineNames=["系列1"];
chart.draw();
});
</script>
</body>
</html>

,打开后右键查看源码。

给我留言

您必须 登录 才能发表留言!

Copyright © 大一网 保留所有权利.  

用户登录

分享到: