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

[Jason_C]

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

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

详细介绍: issues

[learnshare]

我认为 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]

看了一下 demo 好像没有看到可以实时更新数据的？

[barbery]

看起来不错

[sima]

@JiShuTui 你好，对于实时更新数据的问题，我们提供了 chart.changeData(data) 接口，可以实现的。

[sima]

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

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]

@sima OK ，现在终于看明白了，我的错

[learnshare]

@JiShuTui 其实并不是字符多少的问题，实际使用的时候，更多的是通过 JS 生成数组， Object List 更有意义，也更方便。

[mingff258]

类似的有百度的 Echart 、开源的 Chart.js ，但想用都用不上……有在 QML 下的移植就好了

[airyland]

支不支持 NPM 版本的按需引入？

[Jason_C]

@airyland 后续会提供的更多的方式引入～

[qnsh]

网站没有适配 ipad

[Jason_C]

@qnsh 不好意思，适配后续安排进去，包括移动端的～

[yuuko]

为什么不用开源的 echart 呢？

[Jason_C]

@yuuko 开源工作还在准备中