2012-03-22 16 views
5

Amablemente tengo una página y en la página tengo dos gráficos circulares, quiero mostrar diferentes colores de fondo para los 2 gráficos, pero está incrustado en el archivo CSS. ¿hay alguna opción para usar cualquier color? o para hacerlo transparente? mi código:Color de fondo para el gráfico circular de 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'} 

} 

); 

Me pregunto si puedo establecer una propiedad (por ejemplo: backgroundColor ...) en la elaboración de la tabla? 10x

Respuesta

21

De acuerdo con the jqPlot options page tiene una opción llamada grid donde puede establecer todos los parámetros de la cuadrícula, uno de estos parámetros es el color de fondo.

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 ejemplo de uso es:

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' } 
} 
); 

espero que le puede ayudar!

+1

esa es la solución, muchas gracias. lo hice de otra manera, y aquí si el fondo es una imagen funciona bien: para todos los interesados ​​ cambié en el archivo js: jquery.jqplot.min.js el siguiente viejo: this.background = "# fffdf6" nuevo: this.background = "transparent" puede ser si ponemos tranparent en el ejemplo proporcionado por Santiago, ¡también funciona! gracias de nuevo – HGK

+0

Confirmado: fondo: 'transparente' hace lo que esperas. – Tyler

+3

La modificación del archivo distribuido .js no se presta a una buena capacidad de mantenimiento. Recomiendo encarecidamente no seguir ese camino. –

Cuestiones relacionadas