【问题标题】:Background color for Jqplot pie chartJqplot 饼图的背景颜色
【发布时间】:2012-03-22 09:14:46
【问题描述】:

我有一个页面,在页面中我有两个饼图, 我想为 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 倍

【问题讨论】:

    标签: javascript jquery css jqplot pie-chart


    【解决方案1】:

    根据the jqPlot options page,您有一个名为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' }
    }
    );
    

    希望对你有帮助!

    【讨论】:

    • 这就是解决方案,非常感谢。我以另一种方式做到了,如果背景是图像,它可以正常工作:对于所有感兴趣的人,我在 js 文件中进行了更改:jquery.jqplot.min.js 以下旧版本:this.background = "#fffdf6"新:this.background = "transparent" 如果我​​们在 Santiago 提供的示例中放置 tranparent,它也可以工作!再次感谢
    • 已确认:背景:“透明”符合您的要求。
    • 修改分布式 .js 文件不利于良好的可维护性。我强烈建议不要走这条路。
    猜你喜欢
    • 2012-10-25
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-01-01
    • 1970-01-01
    相关资源
    最近更新 更多