jqplot graph background seems to be black in ie8

问题

I'm using jqplot in my website using the following code

    $(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
            }

        }
  );
});

It works fine in Firefox and IE9 without any issues as in figure1. But in IE8 it looks very bad as in figure2.

I have included excanvas.js as follows

<script type="text/javascript" language="javascript" src="jQuery/jQplot/excanvas.min.js"></script>

IE9 and Firefox

IE8

Here is the working jsfiddle Can anyone tell me how can I resolve this issue? What I'm doing wrong here? Any help will be appreciated..

回答1:

Finally I got the answer after research for a day

The issue was with the background property used in jqplot options.

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

I fixed it by replacing 'transparent' using 'rgba(255, 255, 255, 0.1)' in my code and it is working in all browsers including IE8. The same thing can be achieved by using background:url('blank.gif')

I got help from the following links

1. Highcharts chart option backgroundColor:'transparent' showing black on IE 8

2. IE CSS bug background color transparent behaves differently to background-color

来源：https://stackoverflow.com/questions/17571743/jqplot-graph-background-seems-to-be-black-in-ie8