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

提问于 2024-04-29T21:05:51+08:00

浏览次

0

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

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

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

非常感谢，

1 回答

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

然后在这个小提琴中考虑以下快速和脏的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的工具提示），您就开始在条形图中添加一些交互性 .
回复于 2024-04-29T21:05:51+08:00

相关问题