0

如何使我的面积图在 jqplot 中变得透明?jqplot 中是否有任何选项。我正在使用下面的代码来绘制图表。我曾尝试将 grid.background 设置为“透明”,但这不再适用

                    var plot1 = $.jqplot('firstChart', [s1], {
                        height:280, 
                        itle:'Server Activity',
                       grid: {
                            drawBorder: true,
                            shadow: true,
                            gridLineColor: '#666666',
                            gridLineWidth: .2,
                            background: 'transparent'
                        },

                        axesDefaults: {
                            tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
                            tickOptions: {
                                fontFamily: 'Georgia',
                                fontSize: '10pt',
                                angle: -40
                            }
                        },
                        series:[{
                                lineWidth:2,
                                color: "#4bb2c5",
                                markerOptions : {
                                    style:"filledCircle", size:6
                                }}],
                       seriesDefaults: {
                            fill: true,                              
                            rendererOptions: {
                                baselineWidth: 1.5,
                                fillToZero: true,
                                baselineColor: '#ffffff',
                                drawBaseline: true,
                                smooth: true,
                                animation: {
                                    show: true,
                                    speed:1000
                                }
                            }
                        },

                        axes:{
                            xaxis:{
                                renderer:$.jqplot.DateAxisRenderer,
                                tickRenderer: $.jqplot.CanvasAxisTickRenderer,
                                tickOptions:{                          
                                   tickOptions: {
                                        mark: 'outside',    // Where to put the tick mark on the axis
                                        show: true,         // wether to show the tick (mark and label),
                                        showLabel: true,    // w    ether to show the text label at the tick,                                
                                        fontSize:11
                                    }
                                } ,
                                autoscale:true
                            },
                            yaxis:{
                                min:0,
                               tickOptions: {                      
                                    mark: 'inside',    // Where to put the tick mark on the axis
                                    show: true,         // wether to show the tick (mark and label),
                                    showLabel: true,    // wether to show the text label at the tick,
                                    formatString: '%d' , // format string to use with the axis tick formatter
                                    fontSize:11
                                }
                            }
                        },              
                        highlighter: {
                            show: true,
                            sizeAdjust: 7.5,
                            tooltipOffset: 9,
                            tooltipContentEditor: function(current, serie, index, plot){
                                var val = plot.data[serie][index];
                                var valArr = val[0].split(" ");
                                var value=valArr[1].split(":");
                                return value[0] +':'+value[1]+ ', ' + val[1];
                            }
                        }
                    }); 
4

3 回答 3

1

添加 seriesColors: ['rgba(100, 100, 100, 0.5)'] above grid{} 面积图将是透明色。

于 2014-06-19T09:24:21.727 回答
0

您可以使用以下grid.background设置:

grid: {
    background: 'transparent'
}

请注意,这在 IE8 中不起作用,并且会导致白色背景。

API 参考

于 2013-11-14T10:54:14.240 回答
0

让你grid像这样分开:

grid: {
    drawBorder: true,
    shadow: true,
    gridLineColor: '#666666',
    gridLineWidth: .2,
    background: 'rgba(255,255,255,0)'
},

示例:JsFiddle 链接

于 2013-11-14T19:15:01.510 回答