统计图表操作之G2

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

插件官网地址

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

简单的demo

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


<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>

效果图

统计图表操作之G2_第1张图片

你可能感兴趣的:(前端)