Question

我开始从事可视化工作，我正在使用谷歌图表，我正在尝试做一个条形图

https://developers.google.com/chart/interactive/docs/gallery/barchart

我可以在水平条中将标记设置为垂直线，或者可以是圆点，以指出我感兴趣的任何值。另一个可以提供标记条形图中特定点的方法的选项也可能没问题。

所以你们中的任何人都知道用标记做这种条形图的方法吗？

编辑：图表应该与此类似：

http://chart.apis.google.com/chart?chs=100x40&cht=bhs&chco=000000&chd=t:65&chbh=15&chm=r,ff0000,0,0.49,0.51,1

然而，不是作为图像，而是能够与对象交互，因为它可以使用条形图可视化来完成。

非常感谢，

Answer 1

你可能不喜欢这个答案，因为它没有提出使用谷歌图表的解决方案，但如果你忍受我一秒钟，你可能会觉得这很有用，或至少提供信息。无论如何，纯HTML和CSS图形解决方案不会为许多高级可视化提供机会，但我认为 - 基于现实世界的经验 - 你可以用条形图的CSS和HTML做很多事情。我建议阅读Wilson Miner关于名单Accessible Data Visualization with Web Standards

的A List Apart的文章

然后在这个小提琴中考虑以下快速和脏的CSS / HTML图形，模仿您想要实现的图表。

http://jsfiddle.net/9mJzd/

我只会在这里粘贴一段条形码。您还需要查看小提琴中的CSS。

<td>
    <div class="BarWrap">
       <div class="BarBar" style="width: 100%;" title="Ty Cabbage: .426"></div>
       <div class="BarAvg" style="left: 62%" title="League Average: .278"></div>
    </div>
</td>

只需添加jQuery和工具提示插件（例如jQuery UI的工具提示），然后启动即可为条形图添加一些交互性。

带有垂直或点标记的条形图（Google Charts）

1 个答案: