html - jqplot 图形背景在 ie8 中似乎是黑色的

Question

我使用以下代码在我的网站中使用 jqplot

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

        }
  );
});

它在 Firefox 和 IE9 中运行良好，没有任何问题，如图 1 所示。但在 IE8 中它看起来非常糟糕，如图 2 所示。

我已经包含了 excanvas.js 如下

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

IE9 和 Firefox

IE8

这是工作 jsfiddle谁能告诉我如何解决这个问题？我在这里做错了什么？任何帮助将不胜感激..

Answer 1

研究了一天终于得到答案

问题出在 jqplot 选项中使用的背景属性。

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

我通过在我的代码中使用 'rgba(255, 255, 255, 0.1)' 替换 'transparent' 来修复它，它在所有浏览器中工作，包括 IE8 .同样的事情可以通过使用 background:url('blank.gif')

来实现

我从以下链接获得了帮助

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

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