Jqplot饼图的背景颜色

Background color for Jqplot pie chart

本文关键字:背景 颜色 Jqplot      更新时间:2023-09-26

请给我一个页面,页面中有两个饼图,我想为这两个图表显示不同的背景颜色,但它嵌入在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'}
 }
 );

我想知道在绘制图表时是否可以设置属性(例如:背景颜色…)?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' }
}
);

我希望它能帮助你!