使用jquery繪制垂直線

Question

我有以下json，我需要創建一個網格，並且在網格上方需要根據值顯示垂直線：

var arr = [];

 arr= [
   {"Measure":"Air Pollution","Rank":"1","Value":"15.5"},
   {"Measure":"Water Pollution","Rank":"2","Value":"13.5"},
   {"Measure":"Soil Erosion","Rank":"3","Value":"10.5"}
 ]

現在我需要創建一個網格並在網格上方，需要根據“值”創建垂直條。 由於有3個值，因此將創建3個柱。 現在，當選擇網格中的第一行時，需要突出顯示第一個垂直條。 類似地，當選擇第一垂直條時，要選擇網格中的第一行。 創建網格不是問題，因為我使用KendoUI網格但是創建垂直條並且選擇是我被卡住的那個。 任何意見？

謝謝。

Answer 1

我發現您的目標是將數據可視化為條形圖。 如果是這樣，不要重新發明輪子。 為此目的指定了許多好的JS庫。

我使用HighCharts有很好的經驗，試一試。

免責聲明 ：這可能是一種過度殺傷，但如果組件是通用的（以便與靈活數據的兼容性），這是一個合適的解決方案

Answer 2

基於@Bogdan M.關於使用div元素的建議，我設置了一個jsFiddle，展示了使用jQuery構建的垂直條 。 它將值的輸入作為數組轉發，並將它們轉換為DOM元素，相應地設置它們的高度。

可以非常輕松地更新此演示以使用OP提供的數據結構，並且還可以添加選擇行為功能。

最終版本（包含用於構建組件和為其分配選擇行為的完整解決方案）可以在jsFiddle的完整演示中看到 。

現在剩下的就是將選擇功能的處理程序 - 作為單元/行偵聽器 - 分配給KendoUI網格。