Multi-Bar-Chat mit Flot

Question

Beliebiger Beispielcode für Diagramm mit mehreren Balken mit Flot ??

ähnlich wie this example. Die angegebenen gepatchten Dateien funktionieren nicht für mich. Überall kann ich die neuesten Dateien für Multibargraphen herunterladen.

aktualisieren

Ich bin sicher, Flot eine sehr gute Bibliothek ist aber Plugins/Add-ons sind nicht leicht verfügbar, und die auf der Website angegebenen Beispiele sind sehr einfach, so dass ich beschloss jqPlot statt

verwenden

Answer 1

Sie müssen jeden Balken als eigene Datenreihe behandeln. Wenn Sie also 11 Balken sehen, müssen Sie 11 Datenreihen erstellen.

Hier ist Beispielcode für 2 Bars.

<script id="source" language="javascript" type="text/javascript"> 
$(function() { 

var d1 =[0, 2]; 
var d2 =[1,3]; 

var startData = [ 
    { //first series 
     label:"d1", 
     data: [d1], 
     bars:{ 
      show: true, 
      fill: true, 
      fillColor: "red" 
     } 
    }, 
    { //second series 
     label:"d2", 
     data: [d2], 
     bars:{ 
      show: true, 
      fill: true, 
      fillColor: "blue" 
     } 
    } 
]; 

var option={ 
     series: { 
       bars:{ 
         show: true, 
         fill: true 
       } 
     }, 
     grid: { 
       hoverable: true, 
       clickable: true 
     }, 
     yaxis: { ticks: 5 } 
    }; 

$.plot($("#placeholder"),startData,option ); 

});

Answer 2

Haben Sie das orderBars Plugin versucht?

können Sie den Code herunterladen here

Answer 3

doppelt überprüfen Sie die Werte, die Sie vorbei an der X-Achse in (Ihrer Bar-Serie).

Sie brauchen für jeden Balken keine andere Serie, das wäre .... exzessiv.

Was Sie brauchen, ist eine andere Reihe für jede Farbe von bar (oder genauer gesagt, jede andere Reihe von Rendereinstellungen, die Sie in Ihrem Diagramm haben möchten).

Ich weiß, dass Sie weitergezogen sind, aber wenn Sie den Code, der Ihnen Probleme gab, veröffentlichen möchten, könnte es anderen Menschen helfen. Die Beispiele auf der Flottseite sind ziemlich geradlinig, also könnte es einfach etwas Einfaches gewesen sein (wie Ihr X-Achsen-Wert, wenn sie nicht definiert wurden), der Sie stolperte.

Ich verwende Flot in einem Produktionssystem, um drei verschiedene Balkenserien (rote, gelbe und grüne Balken) zu rendern, so dass es sich wie eine sehr ähnliche Lösung anhört, was Sie versuchen zu tun.

Answer 4

Aktualisierte Info: Andións Antwort bezieht sich auf diese Bibliothek. Bars-side-by-side

können Sie den Code hier herunterladen: http://www.benjaminbuffet.com/public/js/jquery.flot.orderBars.js

Das Ergebnis ist: