рисовать вертикальные линии с помощью JQuery

У меня есть следующие JS и мне нужно создать сетку, а также над решеткой должен показать вертикальные линии на основе значений:рисовать вертикальные линии с помощью JQuery

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-я строка в сетке. Создание сетки не является проблемой, так как я использую сетку KendoUI, но для создания вертикальных баров, и выбор - это тот, в котором я застрял. Любые взгляды?

Спасибо.

источник

2012-04-12 Anirban

Можете ли вы опубликовать код, особенно ту часть, где вы застряли? –

Как обходной путь, я думаю, вы можете создавать divs и устанавливать разные высоты на основе значения и небольшой ширины (1px), чтобы они выглядели как строка –

, как создавать те div на основе VALUES? – Anirban

на основе предложений @Bogdan Мандельштама об использовании div элементы, я установил jsFiddle demonstrating vertical bars built using jQuery. Он передает на вход значения как массив чисел и преобразует их в элементы DOM, соответственно устанавливая их высоту.

Эта демонстрация может быть очень легко обновлена, чтобы использовать предоставленную структуру данных OP, а также можно добавить функциональность поведения выбора.

Эта окончательная версия (содержит полное решение, как для построения компонента, так и для его назначения с поведением выбора) можно посмотреть в the full demo on jsFiddle.

Все, что осталось теперь, - назначить обработчики для функции выбора - как прослушиватели ячеек/строк - в сетку KendoUI.

источник

2012-04-12 08:06:53

Perfect ... Это именно то, что я искал , .. – Anirban

проверить отредактированную скрипку, я обновил свой ответ, я думаю, вам понравится ... –

Еще раз спасибо. Я не видел твою обновленную скрипку, но делал то же самое :) – Anirban

Я вижу, что вы пытаетесь визуализировать свои данные в виде бар-диаграммы. Если это так, не заново изобретайте колесо. для этой цели существует множество хороших библиотек JS.

У меня был хороший опыт использования HighCharts, попробуйте его.

Отказ от ответственности: Это может быть излишним, но это подходит решение должны компонентам быть общими (для будущей совместимости с гибкими данными)

источник

2012-04-12 07:42:08

рисовать вертикальные линии с помощью JQuery

ответ

Смежные вопросы