簡體   English   中英

Jqplot餅圖的背景顏色

[英]Background color for Jqplot pie chart

請問我有一個頁面,在頁面中我有兩個餅圖,我想為2個圖表顯示不同的背景顏色,但它嵌入在css文件中! 有沒有選擇使用任何顏色? 還是讓它透明? 我的代碼:

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

 }

 );

我想知道我是否可以在繪制圖表時設置屬性(例如:backgroundcolor ...)? 10倍

根據jqPlot選項頁面,您有一個名為grid的選項,您可以在其中設置所有網格參數,其中一個參數是背景顏色。

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

使用的一個例子是:

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

我希望它可以幫到你!

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM