使用 jQuery 绘制垂直线

draw vertical lines using jquery

本文关键字：垂直线 绘制 jQuery 使用      更新时间：2023-09-26

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

谢谢。

基于@Bogdan M.关于使用div元素的建议，我设置了一个jsFiddle，演示使用jQuery构建的垂直条。它以数字数组的形式中继值的输入，并将其转换为 DOM 元素，相应地设置它们的高度。

该演示可以非常轻松地更新以使用OP提供的数据结构，并且还可以添加选择行为功能。

这个最终版本（包含完整的解决方案，用于构建组件和为其分配选择行为）可以在 jsFiddle 的完整演示中看到。

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

我看到您的目标是将数据可视化为条形图。如果是这样，请不要重新发明轮子。有很多很好的JS库专门用于此目的。

我在使用HighCharts方面有很好的体验，请尝试一下。

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

相关文章：