vertikale Linien zeichnen jquery mit

Ich habe folgende json und ich brauche ein Gitter und auch über dem Raster erstellen müssen vertikale Linien auf der Grundlage der Werte zeigen:vertikale Linien zeichnen jquery mit

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"} 
]

Jetzt brauche ich ein Raster erstellen und über dem Raster müssen vertikale Balken basierend auf dem "Wert" erstellt werden. Es werden 3 Balken erstellt, da 3 Werte vorhanden sind. Wenn nun die erste Zeile im Raster ausgewählt ist, muss der erste vertikale Balken hervorgehoben werden. Wenn die erste vertikale Leiste ausgewählt ist, wird die erste Zeile im Raster ausgewählt. Das Erstellen des Gitters ist kein Problem, da ich das KendoUI-Gitter verwende, aber um die vertikalen Balken zu erzeugen, und die Auswahl ist diejenige, in der ich feststecke. Irgendwelche Ansichten?

Danke.

Quelle

2012-04-12 Anirban

Können Sie etwas Code, insbesondere den Teil, wo Sie stecken bleiben? –

Als Workaround, ich denke, Sie können divs erstellen und verschiedene Höhen basierend auf dem Wert und eine kleine Breite (1px), um sie wie eine Linie aussehen –

, wie diese Divs basierend auf den Werten zu erstellen? – Anirban

Basierend auf @Bogdan M. Vorschlag generisch sein div zur Verwendung von Elemente, ich habe eine jsFiddle demonstrating vertical bars built using jQuery eingerichtet. Sie leitet die Eingabe von Werten als ein Array von Zahlen weiter und konvertiert diese in DOM-Elemente, wobei sie ihre Höhe entsprechend einstellen.

Diese Demo kann sehr einfach aktualisiert werden, um die vom OP bereitgestellte Datenstruktur zu verwenden, und die Funktionalität des Auswahlverhaltens kann ebenfalls hinzugefügt werden.

Diese finale Version (enthält die komplette Lösung, sowohl zum Erstellen der Komponente als auch zum Zuweisen des Selektionsverhaltens) ist in the full demo on jsFiddle zu sehen.

Jetzt müssen nur Handler für die Auswahlfunktionalität als Zellen-/Zeilen-Listener dem KendoUI-Raster zugewiesen werden.

Quelle

2012-04-12 08:06:53

Perfekt ... Dies ist genau das, was ich gesucht habe . .. – Anirban

check out the re-edited fiedle, ich habe meine antwort aktualisiert, ich denke, du wirst es mögen ... –

Danke nochmal. Ich habe deine aktualisierte Geige nicht gesehen, aber dasselbe gemacht :) – Anirban

Ich sehe, dass Sie Ihre Daten als Balkendiagramm visualisieren möchten. Wenn ja, erfinde das Rad nicht neu. Es gibt viele gute JS-Bibliotheken, die für diesen Zweck bestimmt sind.

Ich hatte eine gute Erfahrung mit HighCharts, probieren Sie es aus.

Haftungsausschluss: Dies kann eine zu viel des Guten, aber es ist eine geeignete Lösung sollte die Komponente (für zukünftige Kompatibilität mit flexiblen Daten)

Quelle

2012-04-12 07:42:08

Antwort

Verwandte Themen