Как сделать диаграмму с областями прозрачной в 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

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

Добавьте серию цветов: ['rgba (100, 100, 100, 0,5)'] над сеткой{} диаграмма с областями будет прозрачного цвета.

person Innovative Thinker    schedule 19.06.2014