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

Question

我开始从事可视化工作，并且正在使用Google Chart，正在尝试制作条形图

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

您可能不喜欢这个答案，因为它没有提出使用google-charts的解决方案，但是如果您稍等一会，您可能会发现它很有用，或者至少是有益的。 无论如何，纯HTML和CSS绘图解决方案不会为许多高级可视化提供机会，但基于现实经验，我认为就条形图而言，仅使用CSS和HTML就可以做很多事情。 我建议阅读Wilson Miner在A List Apart上的文章，即使用Web标准的可访问数据可视化。

然后在这个小提琴中考虑以下快速而肮脏的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的工具提示），您便开始向条形图添加一些交互性。