El fondo del gráfico jqplot parece ser negro en ie8

Estoy usando jqplot en mi sitio web usando el siguiente código

$(document).ready(function(){ var xticks = [ '0', '1', '2', '3', '4','5', '6', '7', '8', '9', '10','11', '13','14','15','16','17','18','19','20','21','22','23']; var data1 = [2,4,6,2,2,2,1,1,1,1,1,1,1,1,1,1,1,1,2,6,3,1,2,2,0,0,0,0,0,0,2,5,6,6,7,6,6,6,5,7,7,6,1,0,0,0,0]; var plot2 = jQuery.jqplot ('chart1', [data1], { animate : true, // Will animate plot on calls to plot1.replot({resetAxes:true}) animateReplot : true, seriesDefaults : { pointLabels : { show : true, hideZeros : true, location : 's', ypadding : 12 }, renderer : $.jqplot.BarRenderer, rendererOptions : { varyBarColor : true, barPadding : -20 } }, axes : { xaxis : { label : 'X axis', fontFamily : 'OpenSans-Regular', textColor : '#414141', renderer : $.jqplot.CategoryAxisRenderer, labelRenderer : $.jqplot.CanvasAxisLabelRenderer, tickRenderer : $.jqplot.CanvasAxisTickRenderer, ticks : xticks, tickOptions : { fontFamily : 'OpenSans-Regular', textColor : '#414141', angle : -90, fontSize : '10pt' } }, yaxis : { min : 0, //max : 30, tickInterval:5, label : 'Y axis', fontFamily : 'OpenSans-Regular', textColor : '#414141', // labelRenderer: $.jqplot.CanvasAxisLabelRenderer, tickOptions : { fontFamily : 'OpenSans-Regular', textColor : '#414141', formatString : '%.2f', fontSize : '10pt' } } }, cursor : { show : true, zoom : false, showTooltip : true, followMouse : true, useAxesFormatters : true /* * To show both x and y values showTooltipDataPosition :true, * showVerticalLine:true, useAxesFormatters:true */ }, legend : { renderer : $.jqplot.EnhancedLegendRenderer, show : true, showSwatches : true, fontFamily : 'OpenSans-Regular', marginTop : '100px', textColor : '#414141', rowSpacing : '14px', border : 'none', background : 'transparent', placement : 'outsideGrid' }, grid : { background : 'transparent', gridLineColor : '#c5c5c5' }, seriesColors : [ '#F6BD0F' ], series : [ { seriesColors : [ "#D85252" ], //label : 's1', color : [ '#D85252' ] }, { seriesColors : [ "#F6BD0F" ], label : 's2', color : [ '#F6BD0F' ] } ], highlighter : { show : false } } ); }); 

Funciona bien en Firefox e IE9 sin ningún problema como en la figura 1. Pero en IE8 se ve muy mal como en la figura 2.

He incluido excanvas.js de la siguiente manera

  

IE9 y Firefox

Figura 1

IE8

Figura 2

Aquí está el jsfiddle de trabajo ¿ Puede alguien decirme cómo puedo resolver este problema? ¿Qué estoy haciendo mal aquí? Cualquier ayuda será apreciada ..

Finalmente obtuve la respuesta después de la investigación por un día

El problema era con la propiedad de fondo utilizada en las opciones de jqplot.

 grid : { background : 'transparent', gridLineColor : '#c5c5c5' } 

Lo arreglé reemplazando 'transparent' usando 'rgba(255, 255, 255, 0.1)' en mi código y está funcionando en todos los navegadores, incluido IE8. Lo mismo se puede lograr utilizando background:url('blank.gif')

Obtuve ayuda de los siguientes enlaces

  1. Gráfico de Highcharts opción backgroundColor: ‘transparente’ que muestra negro en IE 8

  2. El color de fondo de IE CSS transparente se comporta de manera diferente al color de fondo

    Intereting Posts