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

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

暂缓？轮到干田开始应用了。～！

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

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

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

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

config.json内容：
{
config : {
title : "Fucking Java web XY线图<br/ >and There is a <br />",
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、利用色块来表示各种折现的数据源信息。