Js_好用的图表工具AntV

最近要做图表展示,所以要找一些工具,网上找了很多,看了一圈选中了 AntV。

  • 选择理由:★★★★★ 五颗星--阿里出品
  • 最主要的是: 全中文,而且文档超全,样例还能在线编辑,真是强大至极啊;

使用说明:

一、使用过程中主要是用到2个页面

  • 使用教程
    这里可以查到数据类型、数据配置、数据例子等等,能用到的这里基本全有了;
  • 在线编辑
    这里可以在线编辑,也可以选择喜欢的例子进行克隆,超级方便;

二、数据组装

  • 根据例子中的数据形式,全部使用json,但是还有一种类型,我没研究,索性就直接用json了,毕竟很方便,不过直接通过ajax返回的json好像不支持呢(js学艺不精呢。。。),我就用了笨方法,通过php将数组生成到一个json文件中,所以直接在js中引用json数据,有点笨但是行得通啊。。不管了。。


    Js_好用的图表工具AntV_第1张图片
    image.png
    • !注:生成json文件这里有个小坑,就是权限问题,一定要在新建文件之后,把权限直接加上,不然到时候莫名其妙的不生效;
  • json结构:

[
{"type":"as","num":9},
.
.
.
{"type":"fe","num":6}
]

- 然后在js中就是组装图表了
1.表格代码直接从你选好的图表中copy下来,标记的地方差不多做一下相应修改;
![image.png](http://upload-images.jianshu.io/upload_images/1870882-232f239cb0927111.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
2.修改图表x轴、y轴名称,以及数据源名称等等,这个比葫芦画瓢都能会用;
3.当然了这里面有些东西还是要变化一下的,不如x轴的分类应该跟json数据源中对应上,这就需要自己提前封装好,这边直接调方法引过来;还有就是每个分类的颜色要跟总数对应上,这里我是通过获取分类的数组总长度然后随机生成这么多个颜色,然后组装成数组直接用的;

function getRandomColor(data) {
randColor = [];
for (var i = 0; i < data.length; i++) {
color = "#" + ("00000" + ((Math.random() * 16777215 + 0.5) >> 0).toString(16)).slice(-6);
randColor.push(color)
}
return randColor;
}

4.差不多就做这些东西,图表就出来了,好用死了O(∩_∩)O~

#最后来个成果展示吧:

![](http://upload-images.jianshu.io/upload_images/1870882-6a05e3e730226f08.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- 这个属于2类数据 [个数,业务线],支持切换业务线;




![](http://upload-images.jianshu.io/upload_images/1870882-2659cc10b573973c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- 这个属于3类数据 [比例,名称,业务线],前两个是x轴,y轴,然后业务线用作切换展示用;

@2017-07-20 18:15:52  要下雨。。。











你可能感兴趣的:(Js_好用的图表工具AntV)