Javascript 中的条形图:堆叠条形 + 分组条形 [英] Bar chart in Javascript: stacked bars + grouped bars

问题描述

我正在寻找一种 Javascript 解决方案来将分组和堆叠条形图与漂亮的图形混合在一起，例如 Protovis.

例如，如果我想比较 Apple (iPads+iPhones) 设备和 Android 设备上的下载量，我可能会(原谅我糟糕的 ascii 艺术)

<前>60k |^50k |#^^40k |# # ^ #^30k |@#^ ^ #^20k |@^ #^ #^ @^10k |@^ @^ @^ @^==================一月 二月 三月 四月传奇#: iPad 下载@:iPhone 下载^:安卓下载

解决方案

结帐 Google 图表工具 和 Google 可视化

例如，您可以指定以下内容:

cht=bvschco=4D89F9,C6D9FDchd=t:10,50,60,80,40|50、60、100、40、20chds=0,160

假设您将 chd 更改为

cht=bvschs=250x150chco=4D89F9,C6D9FDchd=t:0,50,0,80,0, 10, 50, 4060,0,100,0,20, 50, 100, 60chds=0,160

看看上面的图表(好像它是一个组图，但实际上是堆叠的).然后，您可以在之后添加数据以按照图形的意图创建堆叠的查找"组.

I'm looking for a Javascript solution to mix Grouped and Stacked Bars with a beautiful graph, such as those provided by Protovis.

For example if I want to compare downloads on Apple (iPads+iPhones) devices to Android devices, I might have (excuse my terrible ascii art)

60k |             ^
50k |    #    ^   ^
40k |#   #    ^  #^
30k |@   #^   ^  #^
20k |@^  #^  #^  @^
10k |@^  @^  @^  @^
   =================
    Jan Feb Mar Apr

Legend
#: iPad Downloads
@: iPhone Downloads
^: Android Downloads

解决方案

Checkout Google Chart Tools and Google Visualization

for instance you can specify the following:

cht=bvs
chco=4D89F9,C6D9FD
chd=t:10,50,60,80,40|
  50,60,100,40,20
chds=0,160

let's say if you change the chd to

cht=bvs
chs=250x150
chco=4D89F9,C6D9FD
chd=t:0,50,0,80,0, 10, 50, 40
      60,0,100,0,20, 50, 100, 60
chds=0,160

Take a look at the chart above (as if its a group chart, but actually its stacked). Then you can append data after to create stacked 'looking' group as the graph is intended.

这篇关于Javascript 中的条形图:堆叠条形 + 分组条形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！