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

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

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

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

Github地址 ，欢迎点star啊~~~~~~

还有一个tutorial，英文的：Tutorial地址 ,嫌英文麻烦的就看下边吧：

====================================================================

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合并到一句话里并不影响图像的生成.

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都是适用的），来看看效果：

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长的数组，所以就应该是上面这个样子，绘制的图像如下：

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'）就是右边这样 ：





对于气泡图，和上面不同的是我们要添加每个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'}));

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，这里并没有添加，就是随机的。



可以看到绘制出来的图像的原点并不在最左下角，所以图像会用红色的线来标识出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'}))

f.DVPieChart 和 DVRadarChart

这两个图的参数都很简单,演化的种类也不少，直接参看 Tutorial 就可以了。

3.总结

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

最后，在github求个star~~~！！！~~~！！！

======尾巴=========

后面又更新了一些图表，就不在这里继续写了，Tutorial里面有更新，贴些图在这里就是了