3

我有以下 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 个条形图。Now when 1st row in the grid is selected, the first vertical bar needs to be highlighted . 同样，当第一个竖线被选中时，网格中的第 1 行被选中。创建网格不是问题，因为我使用的是 KendoUI 网格，而是创建垂直条，而选择是我卡住的地方。有什么看法吗？

谢谢。

4

2 回答 2

1

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

我有很好的使用HighCharts的经验，试试吧。

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

于 2012-04-12T07:42:08.247 回答
1

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

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

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

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

于 2012-04-12T08:06:53.540 回答