G2(The Grammar Of Graphics) 是一个由纯 javascript 编写、强大的语义化图表生成工具,它提供了一整套图形语法,可以让用户通过简单的语法搭建出无数种图表,并且集成了大量的统计工具,支持多种坐标系绘制,可以让用户自由得定制图表,是为大数据时代而准备的强大的可视化工具。
直接访问: https://g2.alipay.com/
详细介绍: issues
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 最后一条线是出问题了吧? |
2
JiShuTui 2016-05-18 16:56:52 +08:00
看了一下 demo 好像没有看到可以实时更新数据的?
|
3
barbery 2016-05-18 16:57:17 +08:00
看起来不错
|
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); 你说的应该是从上往下的第三条。 |
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"] } 下面这种可以减少好多字符,特别是数据点很多的时候。 |
7
learnshare 2016-05-18 17:23:12 +08:00
@sima OK ,现在终于看明白了,我的错
|
8
learnshare 2016-05-18 17:25:04 +08:00
@JiShuTui 其实并不是字符多少的问题,实际使用的时候,更多的是通过 JS 生成数组, Object List 更有意义,也更方便。
|
9
mingff258 2016-05-18 17:44:15 +08:00
类似的有百度的 Echart 、开源的 Chart.js ,但想用都用不上……有在 QML 下的移植就好了
|
10
airyland 2016-05-18 19:51:25 +08:00
支不支持 NPM 版本的按需引入?
|
12
qnsh 2016-05-18 21:48:39 +08:00 via iPad
网站没有适配 ipad
|
14
yuuko 2016-05-19 10:04:10 +08:00
为什么不用开源的 echart 呢?
|