统计图表操作之G2

xiaoxiao2021-02-28  38

前言:最近在做一个东西的时候,需要对于用户数据,以及其他相关的数据进行图表统计,所以自己在网上找了一下插件,发现了G2,这的确是一个好东西,功能强大,但是唯一不足的时候该插件太大了,有417k。对于一般的操作,还是代价太大了,不过既然接触到了这个插件,还是有必要总结一下。

插件官网地址

http://antv.alipay.com/g2/doc

简单的demo

我这里是把js文件下载下来了,所以是引入本地文件,你们也可以通过引入在线资源

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试</title> <style type="text/css"> #container{ width: 800px; margin: 100px auto; } </style> <script src="g2.js"></script> </head> <body> <div id="container"></div> <script type="text/javascript"> // 定义数据源 var data = [ {time: "2013", amount: 120}, {time: "2014", amount: 240}, {time: "2015", amount: 300}, {time: "2016", amount: 180}, {time: "2017", amount: 150}, ]; // 创建图表对象 var chart = new G2.Chart({ id: "container", forceFit: true,//宽度自适应,也可以直接调整 height: 280, }); // 载入数据源 chart.source(data, { time: { alias: "时间" //定义别名 }, amount: { alias: "销售量" } }); // 绘制图像,这里time*amount也就是time是X轴,如果是amount*time,那么amount就是X轴 // 这里的interval是几何标记,也就是你可以通过设置几何标记从而确定你要展示的图标类型 chart.interval().position("time * amount").color("time"); //渲染图像到网页 chart.render(); </script> </body> </html>

效果图

转载请注明原文地址: https://www.6miu.com/read-800022.html

最新回复(0)