Conversation multi-barres avec Flot

Question

N'importe quel exemple de code pour graphique avec plusieurs barres utilisant flot ??

similaire à this example. Les fichiers corrigés donnés ne fonctionnent pas pour moi. Partout où je peux télécharger les derniers fichiers pour un graphique à barres multiples.

Mise à jour

Je suis sûr que Flot est une très bonne bibliothèque mais plugins/add-ons ne sont pas facilement disponibles et les exemples donnés sur le site sont très basiques, donc je décide d'utiliser jqPlot à la place

Answer 1

Vous devez traiter chaque barre comme sa propre série de données, donc si vous voyez 11 barres, vous devez créer 11 séries de données.

Voici un exemple de code pour 2 barres.

<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

Avez-vous essayé le plugin orderBars?

Vous pouvez télécharger le code here

Answer 3

Double-vérifier les valeurs que vous passez dans sur l'axe X (de votre série bar).

Vous n'avez pas besoin d'une série différente pour chaque barre, ce qui serait ... excessif. Ce dont vous avez besoin, c'est d'une série différente pour chaque barre de couleur (ou plus exactement, chaque ensemble différent de paramètres de rendu que vous aimeriez avoir dans votre graphique).

Je me rends compte que vous avez évolué, mais si vous voulez publier le code qui vous posait problème, cela pourrait aider d'autres personnes. Les exemples sur le site de flot sont assez simples, donc cela peut être juste quelque chose de simple (comme la valeur de votre axe X s'ils n'étaient pas définis) qui vous faisait trébucher. J'utilise flot dans un système de production pour rendre trois séries de barres différentes (barres rouges, jaunes et vertes) de sorte que cela ressemble à une solution très similaire à ce que vous essayez de faire.

Answer 4

Informations mises à jour: La réponse de Andión fait référence à cette bibliothèque. Bars-side-by-side

Vous pouvez télécharger le code ici: http://www.benjaminbuffet.com/public/js/jquery.flot.orderBars.js

Le résultat est: