jQuery制作图表之一--线图(使用插件jquery.jqchart.js)的使用总结之二

红薯 发布于 2009/02/08 09:56
阅读 5K+
收藏 1

书接上回......

我们进一步的修改

其实除了写在config里,还可以写在html代码里。不过这里要注意,很多标签都必须有严格命名规范。
用一张图来说明:

严格按照这个图上的命名规范命名标签,就可以为我们所用。通过它的class属性值,可以清晰的看明白这写都是设置什么的。

暂缓?轮到干田开始应用了。~!

到此,对于这个插件的基本使用已经完全结束。唯一的问题是,这里的data值时我们预先设定好的。

那么如果我们需要即保存显示格式,又保存数据呢?并且数据是动态加载的呢?

显然把他们分开,恩是的~!你想到了JSON。而事实上,config和data的数据格式正是JSON格式的。

我们很容易构建这么两个文件"config.json"和"data1.json"分别存放显示格式和数据格式。

config.json内容:
{
config : {
title : "Fucking Java web XY线图<br/ >and There is a &lt;br /&gt;",
titleLeft: 70,
labelX : ["X1","X2","X3","X4","X5","X6","X7"],
scaleY : {min: 0,max:1000,gap:200}
}
}

data.json内容:
{
data : [
      [435,500,600,700,888,777,925],
      [50,123,312,200,402,300,512],
      [100,400,790,640,128,347,567]
]
}

这样做是好的,这样成功把显示和数据分离,那么如果要合并的话~!?
chartSetting = $.extend({}, config, data); //这句话的意思是,他将config的json对象和data的json对象合并在了一起。有了合并的chartSetting。在调 用$('#canvasMyID').jQchart(chartSetting);就可以了。

那如果数据是动态增加的呢?
这是一个问题。在data.json中,data的数据只有3组。每组7个元素。恩~~如果是不确定的数据。比如有一张表格,每一行都要花一个线性图。我们改如何构建这么json对象呢?

我们假设一种情况,有一个table,table里有有一些数据,比如每一行代表某一个线图的折现。有n行。那该如何将这个表格的数据制作成线图?

测试数据如下table:

<table>
<tr><td>435</td><td>498</td><td>459</td><td>111</td><td>567</td><td>761</td><td>534</td><td>185</td></tr>
<tr><td>356</td><td>908</td><td>312</td><td>222</td><td>290</td><td>999</td><td>123</td><td>491</td></tr>
<tr><td>198</td><td>123</td><td>709</td><td>333</td><td>762</td><td>111</td><td>459</td><td>917</td></tr>
</table>

我们要做以下几步:

1、获得table数据。

2、将数据转换成json对象。

3、将这个数据json对象和config对象合并为一个对象。

4、调用jQchart()方法。

实例代码:
1、获得table数据。
//从页面读取table的数值,构建一个符合json格式的字符串
var arr = "{ data:[";
$('table > tbody > tr').each(function(){
   arr += "["
   $(this).find('td').each(function(){
    arr += $(this).text() + ",";
   });
   arr = arr.substr(0, arr.length-1); //减1取决于上面",",逗号后的空格。没有空格,所以去掉逗号是减1。
   arr += "],";
});
arr = arr.substr(0, arr.length-1); //减1取决于上面",",逗号后的空格。没有空格,所以去掉逗号是减1。
arr += "]}";
这里采用的其实是拼接字符串的方式。将这些数据拼接在一个形同json的字符串里。

2、讲数据转化成json对象。

//因为格式符合,所以可以使用eval创建json对象。
arr = eval('(' + arr + ')'); //将字符串变成JSON对象

3、将这个数据json对象和config对象合并为一个对象。

chartSetting = $.extend({}, config, arr);

4、调用jQchart()方法。

$('#canvasMyID').jQchart(chartSetting);

如此就完成了提取表格数据的做法。

未完待续。。。。。。下一讲将讲解如何修改jquery.jqchart.js
以便更一步的修改显示的样式。来达到一些其他效果。

暂定:

1、取消折现上的数字显示。

2、利用色块来表示各种折现的数据源信息。

加载中
0
小丁
老大 说的的未完待续呢,怎样取消折现上的数字
0
_凤求凰_
_凤求凰_

引用来自“小丁”的答案

老大 说的的未完待续呢,怎样取消折现上的数字
我也想知道。。。
_凤求凰_
_凤求凰_
@红薯 未完待续呢。。。。
0
杨聚财
杨聚财
怎样动态刷新数据,只刷数据,不刷界面
返回顶部
顶部