V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
Jason_C
V2EX  ›  分享创造

G2 一套可视化图形语法 发布啦~

  •  1
     
  •   Jason_C ·
    hi-caicai · 2016-05-18 16:39:35 +08:00 · 3076 次点击
    这是一个创建于 3146 天前的主题,其中的信息可能已经有所发展或是发生改变。

    G2(The Grammar Of Graphics) 是一个由纯 javascript 编写、强大的语义化图表生成工具,它提供了一整套图形语法,可以让用户通过简单的语法搭建出无数种图表,并且集成了大量的统计工具,支持多种坐标系绘制,可以让用户自由得定制图表,是为大数据时代而准备的强大的可视化工具。

    直接访问: https://g2.alipay.com/

    详细介绍: issues

    15 条回复    2016-05-19 11:51:11 +08:00
    learnshare
        1
    learnshare  
       2016-05-18 16:56:15 +08:00
    我认为 Step 图的实现有问题 https://g2.alipay.com/demo/02-line/step-line.html

    常见的实现都是在相邻两个数据点之间画阶梯,或者说数据点都位于阶梯中间。参考:
    http://c3js.org/samples/chart_step.html
    http://dimplejs.org/examples_viewer.html?id=steps_horizontal

    不过 Google Photos 上两种都有,甚至第一种的更多一些。

    ---------
    But 最后一条线是出问题了吧?
    JiShuTui
        2
    JiShuTui  
       2016-05-18 16:56:52 +08:00
    看了一下 demo 好像没有看到可以实时更新数据的?
    barbery
        3
    barbery  
       2016-05-18 16:57:17 +08:00
    看起来不错
    sima
        4
    sima  
       2016-05-18 17:12:38 +08:00
    @JiShuTui 你好,对于实时更新数据的问题,我们提供了 chart.changeData(data) 接口,可以实现的。
    sima
        5
    sima  
       2016-05-18 17:16:14 +08:00
    @learnshare 您好,这张表中我们画的是不同 shape 的 step 图: shape('type', ['vh','hv','hvh','vhv'])

    chart.line().position('x*y').color('type').shape('type', ['vh','hv','hvh','vhv']).size(2);

    你说的应该是从上往下的第三条。
    JiShuTui
        6
    JiShuTui  
       2016-05-18 17:22:24 +08:00
    var data = [
    {"month":0,"tem":7,"city":"tokyo"},
    {"month":1,"tem":6.9,"city":"tokyo"},
    {"month":2,"tem":9.5,"city":"tokyo"},
    {"month":3,"tem":14.5,"city":"tokyo"},
    {"month":4,"tem":18.2,"city":"tokyo"},
    {"month":5,"tem":21.5,"city":"tokyo"},
    {"month":6,"tem":25.2,"city":"tokyo"},
    {"month":7,"tem":26.5,"city":"tokyo"},
    {"month":8,"tem":23.3,"city":"tokyo"},
    {"month":9,"tem":18.3,"city":"tokyo"},
    {"month":10,"tem":13.9,"city":"tokyo"}
    ];

    是否支持下面这种数据:
    var data = {
    "month":[0,1,2,3,4,5,6,7,8,9,10],
    "tem":[7,6.9,9.5,14.5,18.2,21.5,25.2,26.5,23.3,18.3,13.9],
    "city":["tokyo","tokyo","tokyo","tokyo","tokyo","tokyo","tokyo","tokyo","tokyo","tokyo"]
    }

    下面这种可以减少好多字符,特别是数据点很多的时候。
    learnshare
        7
    learnshare  
       2016-05-18 17:23:12 +08:00
    @sima OK ,现在终于看明白了,我的错
    learnshare
        8
    learnshare  
       2016-05-18 17:25:04 +08:00
    @JiShuTui 其实并不是字符多少的问题,实际使用的时候,更多的是通过 JS 生成数组, Object List 更有意义,也更方便。
    mingff258
        9
    mingff258  
       2016-05-18 17:44:15 +08:00
    类似的有百度的 Echart 、开源的 Chart.js ,但想用都用不上……有在 QML 下的移植就好了
    airyland
        10
    airyland  
       2016-05-18 19:51:25 +08:00
    支不支持 NPM 版本的按需引入?
    Jason_C
        11
    Jason_C  
    OP
       2016-05-18 20:48:23 +08:00
    @airyland 后续会提供的更多的方式引入~
    qnsh
        12
    qnsh  
       2016-05-18 21:48:39 +08:00 via iPad
    网站没有适配 ipad
    Jason_C
        13
    Jason_C  
    OP
       2016-05-18 21:49:46 +08:00
    @qnsh 不好意思,适配后续安排进去,包括移动端的~
    yuuko
        14
    yuuko  
       2016-05-19 10:04:10 +08:00
    为什么不用开源的 echart 呢?
    Jason_C
        15
    Jason_C  
    OP
       2016-05-19 11:51:11 +08:00
    @yuuko 开源工作还在准备中
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2605 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 34ms · UTC 05:48 · PVG 13:48 · LAX 21:48 · JFK 00:48
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.