使用jquery绘制垂直线答案

【问题标题】：draw vertical lines using jquery使用jquery绘制垂直线
【发布时间】：2012-04-12 07:07: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 个条形图。现在选择网格中的第1行时，需要突出显示第一垂直条。同样，当第一个竖线被选中时，网格中的第 1 行被选中。创建网格不是问题，因为我使用的是 KendoUI 网格，而是创建垂直条，而选择是我卡住的地方。有什么看法吗？

谢谢。

【问题讨论】：

你能发布一些代码，特别是你卡住的部分吗？
作为一种解决方法，我认为您可以创建 div 并根据值和小宽度（1px）设置不同的高度，使它们看起来像一条线
如何根据 VALUES 创建这些 div？
对于创建条形图，我没有任何代码行...。我可以向您发送我是如何创建网格的，但这是非常基本的......

标签： javascript jquery css kendo-ui

【解决方案1】：

根据@Bogdan M. 关于使用div 元素的建议，我设置了jsFiddle demonstrating vertical bars built using jQuery。它将值的输入作为数字数组传递，并将这些值转换为 DOM 元素，并相应地设置它们的高度。

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

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

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

【讨论】：

查看重新编辑的小提琴，我已经更新了我的答案，我想你会喜欢的......
再次感谢。我没有看到你更新的小提琴，但做了同样的事情:)

【解决方案2】：

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

我在使用HighCharts 时有过很好的体验，试试吧。

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

【讨论】：