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

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

非常感谢，

4

1 回答 1

0

您可能不喜欢这个答案，因为它没有提出使用 google-charts 的解决方案，但如果您再忍耐一下，您可能会发现这很有用，或者至少信息丰富。无论如何，纯 HTML 和 CSS 图形解决方案不会为许多高级可视化提供机会，但我认为 - 基于现实世界的经验 - 你可以在条形图方面仅使用 CSS 和 HTML 做很多事情. 我推荐阅读 Wilson Miner 在 A List Apart 上的文章，名为Accessible Data Visualization with Web Standards

然后在这个小提琴中考虑以下快速而肮脏的 CSS/HTML 图表，它们模仿了您要实现的图表。

http://jsfiddle.net/9mJzd/

我将仅在此处粘贴 Bars 的片段。您还需要查看小提琴中的 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 的工具提示），您就已经开始为您的条形图添加一些交互性。

于 2013-03-11T00:03:31.637 回答