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

最近看了不少数据可视化的书，所以也就顺理成章想做点东西，同时准备把『数据可视化套件开发』这个作为毕业设计搞一搞，花了一两周写了一个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.50334076194382
1bb8b
33, 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里面有更新，贴些图在这里就是了