條形圖（谷歌圖表）與垂直或點標記

Question

我開始在可視化的工作，我使用谷歌圖，我試圖做一個條形圖

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

我在其中可以設置在水平條中的標記作爲垂直線，或者可以是圓點以指出我感興趣的任何值。另一種可能提供在條形圖中標記特定點的方法可能也會正常。

所以你們中的任何一個人都知道一種用Marker做這種條形圖的方法嗎？

編輯：圖形看起來應該與此類似：

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在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的工具提示），你有開始一些交互添加到您的條形圖。