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 demonstrating vertical bars built using jQuery。它将值的输入作为数组转发，并将它们转换为DOM元素，相应地设置它们的高度。

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

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

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

使用jquery绘制垂直线

2 个答案: