使用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网格。