jQuery制作图表之一 线图(使用插件jquery.jqchart.js)的使用总结之二:报错 -问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

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

2020-06-14 09:53:44 408 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 <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、利用色块来表示各种折现的数据源信息。

取消 提交回答
全部回答(1)
  • kun坤
    2020-06-14 09:53:50

    老大 说的的未完待续呢,怎样取消折现上的数字######

    引用来自“小丁”的答案

    老大 说的的未完待续呢,怎样取消折现上的数字
    我也想知道。。。
    ###### @红薯 未完待续呢。。。。###### 怎样动态刷新数据,只刷数据,不刷界面
    0 0
相关问答

0

回答

jQuery的选择器有什么?

2021-11-12 17:21:12 110浏览量 回答数 0

2

回答

jquery选择器无效

2016-07-14 16:11:08 2559浏览量 回答数 2

1

回答

在jquery的选择器的写法上有点疑问

2016-07-13 17:07:01 1410浏览量 回答数 1

1

回答

Jquery 选择器问题!!!!!

2016-07-08 10:54:17 1335浏览量 回答数 1

1

回答

jquery选择器的问题

2016-07-06 15:57:15 1474浏览量 回答数 1

2

回答

关于jquery选择器问题

2016-05-31 10:05:28 1749浏览量 回答数 2

1

回答

关于jQuery选择器的问题

2016-05-30 10:48:09 1669浏览量 回答数 1

1

回答

一个关于 JQuery选择器的问题!

2016-05-27 09:35:15 1736浏览量 回答数 1

1

回答

Jquery选择器使用的问题

2016-03-18 14:09:53 1499浏览量 回答数 1

1

回答

jQuery选择器问题,请大神赐教

2016-03-17 11:54:34 1416浏览量 回答数 1
+关注
0
文章
13397
问答
问答排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载