2012-03-22 7 views
5

Gentilmente ho una pagina e nella pagina ho due grafici a torta, voglio visualizzare il colore di sfondo diverso per i 2 grafici ma è incorporato nel file css! c'è qualche opzione per usare qualsiasi colore ?? o renderlo trasparente? il mio codice:Colore di sfondo per il grafico a torta Jqplot

PieTimer[index] = jQuery.jqplot(PieTimerId, 

TimerValuesArray, 
{ 
seriesDefaults: { 

shadow: false, 

seriesColors: ["#13e837", "#6e869b"], 

renderer: jQuery.jqplot.PieRenderer, 

rendererOptions: { 

highlightMouseOver: false, 

diameter: 40, 

padding: 0, 

showDataLabels: false, 

startAngle: 270, 
sliceMargin: 0, 

shadowOffset: 0, 

shadowAlpha: 0, 


shadowDepth: 0, 

drawBorder: false, 

shadow: false, 

borderWidth: 0 

} 

}, 

legend: { show: false, location: 'w'} 

} 

); 

Mi chiedo se posso impostare una proprietà (es: backgroundcolor ...) quando si disegna il grafico? 10x

risposta

21

In base a the jqPlot options page si ha un'opzione chiamata grid in cui è possibile impostare tutti i parametri della griglia, uno di questi parametri è il colore di sfondo.

grid: { 
    drawGridLines: true,  // wether to draw lines across the grid or not. 
    gridLineColor: '#cccccc', // *Color of the grid lines. 
    background: '#fffdf6',  // CSS color spec for background color of grid. 
    borderColor: '#999999',  // CSS color spec for border around grid. 
    borderWidth: 2.0,   // pixel width of border around grid. 
    shadow: true,    // draw a shadow for grid. 
    shadowAngle: 45,   // angle of the shadow. Clockwise from x axis. 
    shadowOffset: 1.5,   // offset from the line of the shadow. 
    shadowWidth: 3,    // width of the stroke for the shadow. 
    shadowDepth: 3,    // Number of strokes to make when drawing shadow. 
           // Each stroke offset by shadowOffset from the last. 
    shadowAlpha: 0.07,   // Opacity of the shadow 
    renderer: $.jqplot.CanvasGridRenderer, // renderer to use to draw the grid. 
    rendererOptions: {}   // options to pass to the renderer. Note, the default 
           // CanvasGridRenderer takes no additional options. 
}, 

Un esempio di utilizzo è:

var plot1 = jQuery.jqplot ('chart1', [data], 
{ 
    seriesDefaults: { 
     // Make this a pie chart. 
     renderer: jQuery.jqplot.PieRenderer 
    }, 
grid: { 
    drawGridLines: true,  // wether to draw lines across the grid or not. 
     gridLineColor: '#cccccc', // CSS color spec of the grid lines. 
     background: '#ffff66',  // CSS color spec for background color of grid. 
     borderColor: '#999999',  // CSS color spec for border around grid. 
     borderWidth: 2.0,   // pixel width of border around grid. 
     shadow: true,    // draw a shadow for grid. 
     shadowAngle: 45,   // angle of the shadow. Clockwise from x axis. 
     shadowOffset: 1.5,   // offset from the line of the shadow. 
     shadowWidth: 3,    // width of the stroke for the shadow. 
     shadowDepth: 3 
}, 
    legend: { show:true, location: 'e' } 
} 
); 

spero che ti può aiutare!

+1

questa è la soluzione, grazie mille. l'ho fatto in un altro modo, e qui se lo sfondo è un'immagine funziona bene: per tutti coloro che sono interessati ho cambiato nel file js: jquery.jqplot.min.js il seguente vecchio: questo.background = "# fffdf6" nuovo: this.background = "transparent" può essere se mettiamo tranparent nell'esempio Santiago fornito, funziona anche! grazie ancora – HGK

+0

Confermato: background: "trasparente" fa quello che speravi. – Tyler

+3

La modifica del file .js distribuito non si presta a una buona manutenzione. Consiglio vivamente di non seguire quella strada. –