Как мога да направя диаграмата си с области прозрачна в jqplot?

Как мога да направя диаграмата си с области прозрачна в 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];
                            }
                        }
                    }); 

person chinnusaccount    schedule 14.11.2013    source източник


Отговори (3)


Направете grid част така:

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

Пример: JsFiddle връзка

person Gyandeep    schedule 14.11.2013

Можете да използвате настройката grid.background:

grid: {
    background: 'transparent'
}

Имайте предвид, че това обаче не работи в IE8 и води до бял фон.

API Ref

person Rory McCrossan    schedule 14.11.2013
comment
здравей Рори, пробвах в chrome, но не направи никаква промяна - person chinnusaccount; 14.11.2013
comment
Как мога да задам цвят на запълване и цвят на линията на различни цветове? - person chinnusaccount; 14.11.2013

Добавяне на серияЦветове: ['rgba(100, 100, 100, 0.5)'] над мрежата{} площната диаграма ще бъде с прозрачен цвят.

person Innovative Thinker    schedule 19.06.2014