【IT168 技术】web2.0时代的到来,使得互联网进入全民互动时代。它所提倡的理念是:“技术是根,用户体验为本”,用户体验的重要性可见一斑。
而提升用户体验,我们就不得不提一下dojo。它是一款功能强大的javascript库,可以方便、快捷地帮助我们创建外观漂亮、功能强大的图形报表(包括:饼图、柱形图和曲线图等等)。
一、背景
目前,怎么样用dojo创建饼图、柱形图和曲线图等等,类似这样的文章,在网上已经非常多。他们大部分介绍的是各种图形的使用方法,数据大都也是静态采集(比如:销售报表视图、开支报表视图等)。在本文中,主要和大家分享一种方法:怎么样用dojo动态创建图形报表?比如:动态控制柱形图X轴显示的内容、格式和样式等。
本文先回顾一下创建柱形图的基本方法,然后以此为切入点,介绍一下怎么样动态地创建图形报表。本文会以柱形图为例进行介绍,其它类型的图形以此类推。
二、基本用法
在本节,先回顾一下dojo创建柱形图的基本方法。
柱形图有以下三种类型:
Columns:垂直条,如图1 所示
ClusteredColumns:带有聚簇数据集的垂直条,如图2 所示
StackedColumns:带有垂直条的堆叠数据集,如图3 所示
这些图形是怎么创建出来的呢?下面,我们一起来看一下它的使用方法。
引入相关的依赖包
由于dojo默认情况下是不会自动引入图形报表依赖包的,因此我们需要自己 手动引入。需要引入的依赖包如下:
dojo.require("dojox.charting.themes.Claro");
dojo.require("dojox.charting.action2d.Highlight");
创建图形对象
1.创建一个<div>元素,用于放置图形对象
height:420px;"></div>
2.根据<div>的id创建图形对象
dojox.charting.Chart2D("demo",{title:"Demo" });
设置该对象的相关属性
1.添加plot,代码如下所示:
type: "Columns", //用于指定图形的类型
gap:8, //指定每个柱形图之间的间隔
markers: true, //是否显示刻度
animate:{duration: 1000},//定义柱形图的动态效果
});
2.设置x轴的属性和要显示的标签
{value: 2, text: "Tues."},
{value: 3, text: "Wed."},
{value: 4, text: "Thurs."},
{value: 5, text: "Fri."},
{value: 6, text: "Sat."},
{value: 7, text: "Sun."}]});
3.设置y轴的属性
vertical:true,});
4.设置x轴每个标签对应的数据,其中fill表示柱形以什么颜色填充
呈现图形
{fill: "green"});
当对象创建完成,且所有的属性都已经设置好后,就可以调用如下方法把设 置好的图形呈现出来,如图3.1所示:
三、动态地创建图形报表
在本节,介绍一下利用动态数据创建柱形图的方法。
在第3节中可以看到,图形所显示的标签和数据都是静态的,都是写在方法里面的。如果每个星期的数据都有变化,或者X轴的标签要改变,不再显示星期,而是要显示汽车品牌,抑或是其它什么类型,我们应该怎么办呢?这时,有人会想到,再创建一个图形对象,然后传入相关数据。的确,如果数据变化不是很频繁,这也不失为一种解决问题的“懒”方法。但是,如果数据每天都在变化,该方法就会显得力不从心,下面就介绍一下动态数据的创建方法。
创建图形对象后,主要有2个方法来控制图形展示的内容:一个是设置X轴的标签;一个是每个标签对应的数据大小。标签对应的数据,其实就是一个数组,这个比较简单。下面主要介绍一下X轴的标签。
仔细观察第3节中X轴标签的设置方法,大家会发现,第2个参数其实是个对象,该对象里面有个labels属性,它对应的值是个数组类型,且数组中每个元素又是一个对象,对象里面又包含两个属性:一个是value指定索引位置;一个是text指定标签内容。因此,如果要传参数给addAxis()方法,就要遵循下面的方法:
定义自定义对象
代码如下:
this.labels=new Array();
}
该对象表示addAxis()方法的第2个参数,labels是其属性。
this.value=i;
this.text=text;
}
该对象表示labels数组中,每个元素对应的值。
创建自定义对象的实例
var labelNames=["BMW","Toyota","Bens"
,"Honda","Audi","Nissan","BYD"]
var size=labelNames.length;
for(var i=0;i
//创建axisLabelObject对象实例,并赋值给labels数组
labelObj.labels[labelObj.labels.length]=
new axisLabelObject(i+1,labelNames[i]);
}
把实例对象传递给addAxis()方法
此时,该方法接受的不再是一堆静态的数据,而是一个动态的对象实例。这 样,我们就可以实现动态地展示频繁变化的数据,而不是创建多个图形对象。最终效果如图4所示:
四、结束语
本文提供了一种动态创建dojo图形报表的方法。我们还可以对此方法进行加工、扩充。比如:当X轴显示的内容非常多,不能同时显示的时候,可以控制某些列的隐藏或展示来提供更加强悍的用户体验。从而,可以让我们的Web应用吸引到更多的潜在客户。
五、参考资料
[1]. http://www.ibm.com/developerworks/library/wa-dojocharts/
[2].http://dojotoolkit.org/documentation/tutorials/1.6/charting/
六、关于作者
成小敏 软件开发工程师
任职于某大型IT外资企业,主要从事Web2.0和J2EE的研究与开发,目前主要集中在 云计算方面(IaaS)的研发。此外,对javaFX、eclipse plugins和Android等技术也 感兴趣。