Question

如何在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];
                            }
                        }
                    });

Answer 1

您可以使用grid.background设置：

grid: {
    background: 'transparent'
}

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

API Ref

Answer 2

让你grid像这样：

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

示例：JsFiddle link

Answer 3

添加seriesColors：[＆＃39; rgba（100,100,100,0.5）＆＃39;]以上网格{}区域图表将是透明色。

如何在ggplot中使我的区域图表透明？

3 个答案: