Javascript 使用jquery绘制垂直线

我有以下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网格，但创建垂直条和选择是我卡住的地方。有什么看法吗

---

谢谢。

我知道您的目标是将数据可视化为条形图。如果是这样，就不要再发明轮子了。有很多优秀的JS库专门用于此目的

我有很好的使用经验，试试看

---

免责声明：这可能有些过分，但如果组件是通用的（为了将来与灵活的数据兼容），这是一个合适的解决方案

基于@Bogdan M.关于使用

div

元素的建议，我已经设置了一个。它以数字数组的形式传递输入值，并将这些值转换为DOM元素，相应地设置它们的高度

此演示可以很容易地更新为使用OP提供的数据结构，还可以添加选择行为功能

此最终版本（包含完整的解决方案，用于构建组件和为其指定选择行为）可以在中看到

---

现在剩下的就是将选择功能的处理程序（作为单元格/行侦听器）分配给KendoUI网格。

您可以发布一些代码，特别是卡住的部分吗？作为一种解决方法，我认为您可以创建div，并根据值和小宽度（1px）设置不同的高度要使它们看起来像一条线，如何根据值创建这些div？要创建条，我没有任何代码行。。。。我可以告诉你我是如何创建网格的，但这是非常基本的…看看重新编辑的小提琴，我已经更新了我的答案，我想你会喜欢的…再次感谢。我没有看到你更新的小提琴，但做了同样的事情：）