使用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网格，但创建垂直条和选择是我卡住的问题。有何看法？

谢谢。

- Anirban

---

你能发布一些代码，特别是你卡住的部分吗？ - Mr Lister

作为一种解决方法，我认为您可以创建div并根据值设置不同的高度，以及一个小宽度（1像素）使它们看起来像一条线。 - Bogdan M.

如何基于这些值创建那些 div？ - Anirban

创建这些条形图，我没有任何代码……我可以发送给您我如何创建网格，但那非常基础。 - Anirban

Answer 1

我看到你想将你的数据可视化为柱状图。如果是这样，不要重复造轮子。有很多专门用于此目的的优秀JS库。

我在使用HighCharts时有很好的经验，你可以试试。

免责声明：这可能有点过度，但对于组件是通用的（为了与灵活的数据未来兼容），这是一个合适的解决方案。

- Eliran Malka

Answer 2

根据@Bogdan M.关于使用div元素的建议，我已经设置了一个使用jQuery构建垂直条的jsFiddle示例。它依赖于将值作为数字数组输入，并将其转换为DOM元素，根据值设置它们的高度。

这个演示非常容易更新为使用OP提供的数据结构，并且还可以添加选择行为功能。

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

现在只剩下为选择功能分配处理程序-作为单元格/行监听器-给KendoUI网格。

- Eliran Malka

---

请查看重新编辑的代码片段，我已经更新了我的答案，我认为你会喜欢它的... - Eliran Malka

再次感谢您。我没有看到您更新的fiddle，但我做了同样的事情 :) - Anirban