Js_好用的图表工具AntV
最近要做图表展示,所以要找一些工具,网上找了很多,看了一圈选中了 AntV。
- 选择理由:★★★★★ 五颗星--阿里出品
- 最主要的是: 全中文,而且文档超全,样例还能在线编辑,真是强大至极啊;
- 使用教程
这里可以查到数据类型、数据配置、数据例子等等,能用到的这里基本全有了; - 在线编辑
这里可以在线编辑,也可以选择喜欢的例子进行克隆,超级方便;
- 根据例子中的数据形式,全部使用json,但是还有一种类型,我没研究,索性就直接用json了,毕竟很方便,不过直接通过ajax返回的json好像不支持呢(js学艺不精呢。。。),我就用了笨方法,通过php将数组生成到一个json文件中,所以直接在js中引用json数据,有点笨但是行得通啊。。不管了。。
文章图片
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数据源中对应上,这就需要自己提前封装好,这边直接调方法引过来;还有就是每个分类的颜色要跟总数对应上,这里我是通过获取分类的数组总长度然后随机生成这么多个颜色,然后组装成数组直接用的;
【Js_好用的图表工具AntV】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要下雨。。。
推荐阅读
- 对|对 象
- 天堂伞
- 8月更新|8月更新 | Java on Azure Tooling
- 日精进136天
- 字符串|SQLServer常用的字符串函数梳理
- 自媒体文章用的图片加水印怎么弄吗(分享两个实用方法)
- 图片转文字软件哪个好(推荐这几款良心软件)
- 编辑图片加文字的软件哪个好(这三个软件还不错)
- 离别,是为了更好的相聚
- 你还在进行无用的学习吗()