随着Html 5 的流行,出了不少基于Canvas 的图表控件,使用这些控件可以展示图表,仪表盘,饼图等等,这样我们可以比较方便展示信息,让数据更直观。在此简单介绍一下RGraph 这组控件,官网http://www.rgraph.net已经介绍很详细了,我在此只是简做笔录,方便用时拿来即可。
首先介绍一下 柱状图
准备工作:
1,首先我要展示的数据如下得数据如下:数据以JSON文件存储在服务端的配置文件里,名字为json.txt,数据没有特别的意义 只是demo 联系使用,模仿从服务端加载数据并在客户端以图表的形式来show一下。
[{"countryname" : "中国","goldmedal":18},
{"countryname" : "美国", goldmedal":18},
{"countryname" : "韩国", "goldmedal":7},
{"countryname" : "法国", goldmedal":6},
{"countryname" : "英国", "goldmedal":5}]
2,自己到官网下载RGraph 的源码,然后解压,里面包括了插件的代码库,以及使用的演示demo,这里我们需要的代码库即存放在libraries 文件夹下,也是我们要使用的.

本文介绍了如何利用HTML5的RGraph库从JSON文件中获取数据并显示为柱状图。首先,展示了存储在服务器上的JSON数据结构,接着说明从官网下载RGraph库并将其引入到Web工程中。最后,给出了创建柱状图的代码示例,并提到如果添加特定效果库,图形会有动态展示的效果。
612

被折叠的 条评论
为什么被折叠?



