2012-03-22 12 views
5

Lütfen bir sayfam var ve sayfada iki pasta grafiğim var, 2 grafik için farklı arka plan rengi görüntülemek istiyorum ama css dosyasına gömülü! herhangi bir renk kullanmak için herhangi bir seçenek var mı? ya da şeffaflaştırmak için? kodum: ben bir özelliği ayarlayabilirsiniz eğerJqplot pasta grafik için arka plan rengi

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

} 

); 

merak ediyorum (örn: backgroundcolor ...) grafiği çizerken? 10x

cevap

21

the jqPlot options page göre size tüm ızgara parametrelerini ayarlayabilirsiniz grid adlı bir seçenek var, bu parametrelerden biri arka plan rengidir.

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. 
}, 

kullanımının bir örneği: Ben size yardımcı olabilir umut

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

!

+1

çözüm bu, çok teşekkürler. başka bir şekilde yaptım ve arka plan bir görüntü ise iyi çalışıyorsa: ilgilenen herkes için js dosyasında değiştirilmiş: jquery.jqplot.min.js aşağıdaki eski: this.background = "# fffdf6" new: this.background = "transparent" , sağlanan Santiago örneğine şeffaflık koyarsak da işe yarar! tekrar teşekkürler – HGK

+0

Onaylandı: arka plan: 'şeffaf' umduğun şeyi yapar. – Tyler

+3

Dağıtılmış .js dosyasının değiştirilmesi kendini iyi bir şekilde koruyamaz. Bu yolu izlememeni şiddetle tavsiye ederim. –