基于javascript的简单数据可视化:DVisual

页面导航:首页 > 网络编程 > JavaScript > 基于javascript的简单数据可视化:DVisual

基于javascript的简单数据可视化:DVisual

来源: 作者: 时间:2016-02-03 09:20 【

也是好久没更新博客了,主要是之前都是学到了新东西新算法就写篇博客总结一下,去年也是到处实习了一段时间,没有太多时间去吃透大部头,所以也就好久没有更新了。最近看了不

也是好久没更新博客了,主要是之前都是学到了新东西新算法就写篇博客总结一下,去年也是到处实习了一段时间,没有太多时间去吃透大部头,所以也就好久没有更新了。

最近看了不少数据可视化的书,所以也就顺理成章想做点东西,同时准备把『数据可视化套件开发』这个作为毕业设计搞一搞,花了一两周写了一个DVisual出来,目前倒是只支持一些基本的图表绘制,后面可能会加入一些比较炫酷的图标,以及鼠标操作等功能吧。

当然如果你想在在上绘制简单图表,并且没有其它特殊要求的话,现在也是可以试用一下的,本文就简单用中文介绍一些使用方法把,感觉我这个用起来还是蛮方便的

 

 

1.如何开始

a. 首先是把这个dvisual.js文件添加到你的html代码里面.

 

<script type=text/javascript src=dvisual.js></script>
b.然后新建一个实例,传入你的canvas的id.

 

 

dvisual = new DVisual('canvas_id');
c.然后你就可以先建立各种图表元素了,所有图表元素类我都有一个统一的方法draw(dv),所以复杂图像都是由点线面和文字这些基础图像组合起来的。这里我们加入一个bar chart:所有的参数都是用过args传入的,args是一个类似字典的东西,照着下面这样写就好了

 

 

args = {'X':[ClassA,ClassB,ClassC,ClassD]
       ,'Y':[5,9,4,8]};
bar = new DVBarChart(args);
d.把图表加入到我们的DVisual实例即可,最后使用draw()进行绘制
dvisual.addElement(bar);
dvisual.draw();

 

这样我们就能得到这样一幅图像了:你也可以吧上面的c,d合并到一句话里并不影响图像的生成.

height=400

2.可用的类和可选参数。

 

这个可以从doc里找到详细的说明。在这里简单总结一下图表的参数吧(你应该不会用到点线面那些基础图形元素)。

a.DVBarchart()

这就是我们用来绘制上面那个图形的类了,除了通常的bar之外,它还可以绘制stacked bar,上代码看看:

 

args = {'X':[bar1,bar1,bar3],
        'stackedClass':[stacked_1,stacked_2],
        'stackedY':[[1,2],[3,4],[5,6]],
        'style':'stacked',
        'stackedColor':[new DVColor(55,185,241,0.5),new DVColor(207,231,62,0.5)]}
这是给出了args的内容,其它和第一步中是一样的,style参数控制图表的类型。可以看到这时我们没有传入Y参数了,因为此时的数据已经不是二维的了,而是每一个bar都有几个数据,所以我们改用stackedY来传入数值,stackedClass来传入每一个bar上堆叠的数据名称,至于stackedColor,作用显而易见,当然你也可以不传入,这样它就是随机的(这对所有的color都是适用的),来看看效果:

 

height=400

b.DVMulBarChart

如果我们想建立一个多维的柱状图,也就是每个标签下面有多个bar的,那就需要使用DVMulBarChart了:

 

args = {'X':[A,'B'],'Ys':[[3,2,4],[5,7,8]],'Z':[first,second,third]}
dvisual.addElement(new DVMulBarChart(args));

 

『Y』同样不需要了,因为此时对于每个X[I],都应该对应一个Z.length长的数组,所以就应该是上面这个样子,绘制的图像如下:

height=400

c.DVLineChart()

说到图,最先想到的其实可能是散点图和线图,这在DVLineChart中给予了实现,它不光支持散点和连线,还有区域图(area),也就是与x轴构成的区域;以及气泡图,不多说,来看看例子:

 

divisual.addElement(new DVLineChart({'X':[1,2,3,4,5,6],
                                     'Y':[1,2,3,4,5,6],
                                     'style':'dot|line'}));
X,Y就是所有点的x值和y值,很直观,下面的style这里设置为dot|line,它一共有四种:dot,line,area和bubble,其中前三种是可以组合使用的,bubble因为有涉及到数据不同,所以只能单独使用。绘图如下:(如果把style改为'dot|line|area')就是右边这样 :

 

height=400height=400

对于气泡图,和上面不同的是我们要添加每个bubble的半径,所以应该是这样的:

 

divisual.addElement(new DVLineChart({'X':[1,2,3,4,5,6],'Y':[1,2,3,4,5,6],
                                    'bubbleRadius':[1,2,3,4,5,6],
                                    'style':'bubble'}));

height=400

 

d.DVMulLineChart

当然,和bar一样,如果我们有多条线段或者多种bubble要绘制,就需要用到DVMulLineChart了

 

dvisual.addElement(new DVMulLineChart({'Xs':[[1,-2,3,4,5,6],[1,2,3,4,5,6]],
                                        'Ys':[[1,2,3,4,3,6],[-3,5,2,7,5,2]],
                                        'Zs':[[3,2,1,4,5,7],[3,2,7,6,8,4]],
                                        'classes':['A','B'],
                                        'style':'bubble'}));
可以看出来,参数都从X,Y,bubbleRadius 变成了Xs,Ys,Zs,「classes」表示了不同种类数据的名称,当然你也可以传入颜色colors,这里并没有添加,就是随机的。

 

height=400

可以看到绘制出来的图像的原点并不在最左下角,所以图像会用红色的线来标识出0值坐标

 

e.DVHistChart

 

这个比较简单,传入一系列的值即可,你也可以通过sec设置统计的间隔,以及yStyle设置显示个数还是百分比。

 

dviusal.addElement(new DVHistChart( {'X':[4.845526425588935, 4.259344936827764, 3.8098053040235538, 1.952000211472447, 4.635797415383389, 4.024019790968537, 3.3602908242946734, 5.904528760874355, 4.198898591038685, 3.590128975916881, 4.332713128186926, 3.1865396813511784, 2.5162865661667198, 4.712821025260148, 3.71360994330834, 3.8493524061913744, 3.7159258918857536, 5.51399789047954, 3.6300232108929382, 3.545076471891732, 3.0676446553817147, 3.2444930114999093, 3.5479330646839933, 4.976746738515327, 3.9332813190873934, 5.006312033998867, 3.404727953308918, 3.5033407619438233, 3.079551989356432, 3.8632840581876042, 3.157986089467415, 3.4195326824382866, 3.8080356643280124, 2.957309227091329, 4.118392736251364, 3.6411410599078917, 3.7624757886685964, 4.8647889699576226, 5.21796736714372, 3.976067213322964, 5.126928746440573, 3.974656703704623, 3.233580498913617, 4.395312593899124, 4.068962687058488, 3.891929789953702, 4.469243993566407, 4.334454703693426, 3.9209889294562856, 3.4434304992247453, 4.497549493028219, 3.416343894896489, 4.665283209646114, 4.680609105269387, 4.983997832840491, 3.6712180044043317, 3.265064804033842, 3.4698542145767295, 3.600410757683259, 3.258705331315113, 3.4711330714824475, 5.850035283124024, 4.4280162444420395, 2.9032881754752737, 3.8438971175165753, 4.876106607781984, 2.558687703308084, 3.5013932005344044, 3.5555419525521454, 5.1907150725045845, 4.011722379620389, 3.527897189378135, 4.10495828533477, 6.62176464809461, 4.2726902430636144, 3.900071148628866, 2.575252541466217, 5.328266087881893, 2.5589399335225336, 5.724120236174612, 4.4515392634560085, 4.7151321389757594, 2.8531894976428953, 3.4703243319242265, 2.2640882905146724, 5.0719845838182795, 3.574145032952119, 4.477360695988922, 5.779618114520955, 4.456319741265055, 3.8274174274387756, 6.050865845999171, 5.286157426108568, 4.197556181625366, 3.2386132037552726, 4.409816073319034, 4.225877761979799, 5.313407146149141, 5.042124222577709, 3.979632468039347],
            'yStyle':'value'}))
height=400

 

f.DVPieChart 和 DVRadarChart

这两个图的参数都很简单,直接参看 Tutorial 就可以了。


 

3.总结

这个目前只实现了这些基础的东西,尽可能做到完善,诸如x,y轴的名字,表格是否绘制,Pie中显示的内容,这些你都可以通过参数进行设定的,如果可能后面会加入一些新的高大上的图形,还有增加鼠标的操作响应等等,会继续丰富它就是了~~~~

 

 

 

 

 

 

 

 

Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<