2012-12-20 13 views
8

Desidero creare un grafico a barre con due serie di barre impilate raggruppate per confrontare i due gruppi di barre impilate. Questo dovrebbe essere visualizzato nel seguente modo:Come utilizzare Jqplot per mostrare due gruppi di barre di diverso colore nello stesso grafico a barre in pila

Bar chart

Ho passato con questo link

Ma non mi ha aiutato trama qualcosa come si vede nell'immagine sopra. Ho anche provato a inviare due serie di dati come [[s1, s2, s3], [s4, s5, s6]] ma non mi ha aiutato a tracciare il grafico. Qualcuno sa come farlo?

Qualsiasi aiuto sarà molto apprezzato. Grazie in anticipo.

+0

Qualcuno mi può aiutare con questo? –

risposta

3

L'impostazione dell'opzione stackSeries: true creerà la visualizzazione desiderata per i grafici a barre.

+0

Ciao MLX, funzionerà quando lavoriamo solo con una serie di dati.Qui, abbiamo due serie di grafici in pila (arancione-verde-blu E nero-grigio-viola). Dì se vogliamo mostrare solo le pile arancione-verde-blu, allora è possibile. –

+0

Questo non funziona per ciò che viene chiesto nella domanda: due diversi set di dati raggruppati insieme con colori diversi. Sì, causerà un * set singolo * di dati da visualizzare come un grafico a barre impilate, ma ciò era già presupposto dalla domanda. – Makyen

2

Le fonti ufficiali:

Il jqPlot documentation non è aggiornato quindi ho dato un'occhiata allo source code. Sfortunatamente, non c'è modo di avere direttamente due serie di barre con un grafico a barre impilate. La proprietà jqPlot.stackSeries è solo un valore booleano. È solo una funzione dire a jqPlot di impilare ciascuna serie una sopra l'altra per il numero di barre quanti sono i valori nelle diverse serie. Ogni serie viene tracciata un valore per barra con la prima serie in basso. In altre parole, tutti i valori [0] vengono tracciati nella prima barra, i valori [1] nel secondo ecc. La quantità visualizzata all'interno della barra è la somma del valore [n] per le serie correnti e tutte le serie precedenti. Non c'è modo di specificare che ci sono due o più raggruppamenti di serie. La capacità di fare ciò che si desidera semplicemente non esiste in jqPlot.

Ma si può realizzare ciò che desiderate:

Il fatto che jqPlot non supporta nativamente ciò che si vuole non significa che non si può fare, ma solo che è necessario per ottenere creativo.

Il grafico desiderato può essere considerato come due grafici separati sovrapposti l'uno all'altro con spaziatura tra le barre sui singoli grafici che consente uno spazio sufficiente (seriesDefaults.rendererOptions.barMargin) per le barre dell'altro grafico da sovrapporre successivamente a loro.

È possibile utilizzare per creare jqPlot: enter image description here

Questo grafico ha la scala, lo sfondo e griglia linee si desiderio impostato per essere visibile. Si noti che il grafico ha una barra in più. Questo è necessario per fornire abbastanza sfondo e linee della griglia per l'ultima barra fornita dall'altro grafico.

È possibile anche utilizzare jqPlot per creare il secondo grafico: Second graph with transparent background

Questo grafico ha la bilancia e reticoli impostato in jqPlot per non essere visibile.

seriesDefaults.axes.xaxis.tickOptions.show = false; 
seriesDefaults.axes.yaxis.tickOptions.show = false; 
etc. 

Lo sfondo è impostato su transparent. Si noti che è necessario spostare leggermente la posizione di questo grafico a destra quando si posiziona lo relativo al primo grafico.

sovrapposto, si finisce con: Overlay Graph 1 and Graph 2

È quindi possibile utilizzare un vuoto <div> con lo stesso colore di sfondo come il colore della tua pagina web di sfondo e di overlay che per coprire la barra extra sul primo grafico, ma lasciando abbastanza del primo grafico e delle linee della griglia per estendere un po 'oltre l'ultima barra del secondo grafico.

Vi ritroverete con:

Final graph

Si può vedere un working solution at at JSFiddle utilizzando jqPlot 1.0.8r1250.

Confrontando la richiesta originale contro la versione finale del grafico prodotta con questo metodo si può vedere che sono molto vicini: Compare jqPlot version with original desire Tra i due la differenza più evidente è lo spazio più grande tra l'asse Y nel versione jqPlot. Sfortunatamente, non sembra esserci un'opzione per ridurre tale quantità per i grafici a barre in pila.

Si noti che la mancanza di un bordo sulla destra del grafico generato da questo codice è intenzionale perché non esisteva nella richiesta originale. Personalmente, preferisco avere un bordo sul lato destro del grafico. Se si modifica il CSS un po ', che è facile da ottenere: La mia versione preferita del grafico include un bordo a sinistra e bilancia gli spazi: My preferred version of the graph

Potete vedere un JSFiddle of this version lavoro.

Nel complesso non è così difficile. Sarebbe, ovviamente, più facile se jqPlot supportasse più set di barre. Spero che lo sarà a un certo punto. Tuttavia, l'ultima versione era 2013-03-27 e non sembra esserci stato alcun lavoro di sviluppo dopo quel tempo. Prima di ciò c'erano rilasci ogni pochi mesi. Ma, jqPlot è rilasciato sotto le licenze GPL e MIT, quindi chiunque può continuare il lavoro.

$(document).ready(function() { 
 
    //Numbers derived from desired image 
 
    //var s1 = [10, 29, 35, 48, 0]; 
 
    //var s2 = [34, 24, 15, 20, 0]; 
 
    //var s3 = [18, 19, 26, 52, 0]; 
 
    //Scale to get 30 max on plot 
 
    var s1 = [2, 5.8, 7, 9.6, 0]; 
 
    var s2 = [6.8, 4.8, 3, 4, 0]; 
 
    var s3 = [13.6, 8.8, 3, 7.8, 0]; 
 
    plot4 = $.jqplot('chart4', [s1, s2, s3], { 
 
     // Tell the plot to stack the bars. 
 
     stackSeries: true, 
 
     captureRightClick: true, 
 
     seriesColors: ["#1B95D9", "#A5BC4E", "#E48701"], 
 
     seriesDefaults: { 
 
      shadow: false, 
 
      renderer: $.jqplot.BarRenderer, 
 
      rendererOptions: { 
 
       // jqPlot does not actually obey these except barWidth. 
 
       barPadding: 0, 
 
       barMargin: 66, 
 
       barWidth: 38, 
 
       // Highlight bars when mouse button pressed. 
 
       // Disables default highlighting on mouse over. 
 
       highlightMouseDown: false 
 
      }, 
 
      title: { 
 
       text: '', // title for the plot, 
 
       show: false, 
 
      }, 
 
      markerOptions: { 
 
       show: false, // wether to show data point markers. 
 
      }, 
 
      pointLabels: { 
 
       show: false 
 
      } 
 
     }, 
 
     axes: { 
 
      xaxis: { 
 
       renderer: $.jqplot.CategoryAxisRenderer, 
 
       tickOptions: { 
 
        show: false 
 
       }, 
 
       lastPropertyConvenience: 0 
 
      }, 
 
      yaxis: { 
 
       // Don't pad out the bottom of the data range. By default, 
 
       // axes scaled as if data extended 10% above and below the 
 
       // actual range to prevent data points right on grid boundaries. 
 
       // Don't want to do that here. 
 
       padMin: 0 
 
      } 
 
     }, 
 
     legend: { 
 
      show: false, 
 
      location: 'e', 
 
      placement: 'outside' 
 
     }, 
 
     grid: { 
 
      drawGridLines: true, // wether to draw lines across the grid or not. 
 
      shadow: false, // no shadow 
 
      borderWidth: 1, 
 
      background: 'white', // CSS color spec for background color of grid. 
 
      lastPropertyConvenience: 0 
 
     }, 
 
     lastPropertyConvenience: 0 
 
    }); 
 
}); 
 
    
 
    $(document).ready(function() { 
 
     //Numbers derived from desired image 
 
     //var s1 = [10, 29, 35, 48, 0]; 
 
     //var s2 = [34, 24, 15, 20, 0]; 
 
     //var s3 = [18, 19, 26, 52, 0]; 
 
     //Scale to get 30 max on plot 
 
     var s1 = [2, 5.8, 7, 9.6, 0]; 
 
     var s2 = [6.8, 4.8, 3, 4, 0]; 
 
     var s3 = [3.6, 3.8, 5.2, 10.4, 0]; 
 
     plot4 = $.jqplot('chart5', [s1, s2, s3], { 
 
      // Tell the plot to stack the bars. 
 
      stackSeries: true, 
 
      captureRightClick: true, 
 
      seriesColors: ["#754DE9", "#666666", "#000000"], 
 
      seriesDefaults: { 
 
       shadow: false, 
 
       renderer: $.jqplot.BarRenderer, 
 
       rendererOptions: { 
 
        // jqPlot does not obey these options except barWidth. 
 
        show: true, 
 
        barPadding: 0, 
 
        barMargin: 66, 
 
        barWidth: 38, 
 
        // Highlight bars when mouse button pressed. 
 
        // Disables default highlighting on mouse over. 
 
        highlightMouseDown: false 
 
       }, 
 
       title: { 
 
        text: '', // title for the plot, 
 
        show: false, 
 
       }, 
 
       markerOptions: { 
 
        show: false, // wether to show data point markers. 
 
       }, 
 
       pointLabels: { 
 
        show: false 
 
       } 
 
      }, 
 
      axesDefaults: { 
 
       //show: false  
 
      }, 
 
      axes: { 
 
       xaxis: { 
 
        renderer: $.jqplot.CategoryAxisRenderer, 
 
        tickOptions: { 
 
         show: false 
 
        }, 
 
        lastPropertyConvenience: 0 
 
       }, 
 
       yaxis: { 
 
        show: false, 
 
        // Don't pad out the bottom of the data range. By default, 
 
        // axes scaled as if data extended 10% above and below the 
 
        // actual range to prevent data points right on grid boundaries. 
 
        // Don't want to do that here. 
 
        padMin: 0, 
 
        tickOptions: { 
 
         show: false 
 
        }, 
 
       } 
 
      }, 
 
      legend: { 
 
       show: false, 
 
       location: 'e', 
 
       placement: 'outside' 
 
      }, 
 
      grid: { 
 
       drawGridLines: false, // wether to draw lines across the grid or not. 
 
       shadow: false, // no shadow 
 
       borderWidth: 10, 
 
       background: 'transparent', // CSS color for background color of grid. 
 
       gridLineColor: 'transparent', // *Color of the grid lines. 
 
       borderColor: 'transparent', // CSS color for border around grid. 
 
       lastPropertyConvenience: 0 
 
      }, 
 
      lastPropertyConvenience: 0 
 
     }); 
 
    });
#cover1 { 
 
    padding:0; 
 
    margin: 0; 
 
    background-color: white; 
 
    left: 451px; 
 
    width: 88px; 
 
    /* Uncomment the next three lines to have a border on the right of the graph and 
 
     balanced whitespace:*/ 
 
    /* 
 
    border-left: 2px solid #CCCCCC; 
 
    left:476px; 
 
    width: 62px; 
 
    */ 
 
} 
 
#chart4 .jqplot-xaxis-tick { 
 
    visibility: hidden; 
 
} 
 
#chart5 .jqplot-xaxis-tick { 
 
    visibility: hidden; 
 
} 
 
#chart4 .jqplot-yaxis-tick { 
 
    font: 9px arial 
 
}
<link class="include" rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jqplot/1.0.8/jquery.jqplot.css" /> 
 

 
<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="http://cdn.jsdelivr.net/excanvas/r3/excanvas.js"></script><![endif]--> 
 
<script class="include" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<!-- Main jqPlot --> 
 
<script class="include" type="text/javascript" src="http://cdn.jsdelivr.net/jqplot/1.0.8/jquery.jqplot.js"></script> 
 
<!-- Additional jqPlot plugins --> 
 
<script class="include" type="text/javascript" src="http://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.barRenderer.min.js"></script> 
 
<script class="include" type="text/javascript" src="http://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.categoryAxisRenderer.min.js"></script> 
 

 

 
<div style="position:absolute; left:10px; top:10px;"> 
 
    <div id="chart4" style="width:548px; height:185px;"></div> 
 
    <div id="chart5" style="width:536px; height:185px; top:-185px; left:53px;"></div> 
 
    <div id="cover1" style="position: relative; height: 152px; top:-361px;"></div> 
 
</div>

Il codice sopra è basato su quello al example page listed in the question.

0

Soluzione pratica ...

$(document).ready(function(){ 
    var s1 = [2, 0, 0, 10,11,0, 6, 2, 0,10,11]; 
    var s2 = [7, 0, 0, 4,11,0, 6, 2, 0,10,11]; 
    var s3 = [4, 0, 0, 7,11,0, 6, 2, 0,10,11]; 
    var s4 = [0, 20, 0, 0,0,0, 0, 0, 0,0,0]; 
    plot3 = $.jqplot('chart3', [s1, s2, s3,s4], { 
    stackSeries: true, 
    captureRightClick: true, 
    seriesDefaults:{ 
     renderer:$.jqplot.BarRenderer, 
     rendererOptions: { 
      barMargin: 30, 
      highlightMouseDown: true 
     }, 
     pointLabels: {show: true} 
    }, 
    axes: { 
     xaxis: { 
      renderer: $.jqplot.CategoryAxisRenderer 
     }, 
     yaxis: { 
     padMin: 0 
     } 
    }, 
    legend: { 
     show: true, 
     location: 'e', 
     placement: 'outside' 
    }  
    }); 
    $('#chart3').bind('jqplotDataClick', 
    function (ev, seriesIndex, pointIndex, data) { 
     $('#info3').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data); 
    } 
); 
}); 

Image: enter image description here

Problemi correlati