2013-07-10 18 views
1

我使用jqplot在我的網站上使用下面的代碼jqplot圖形背景似乎是黑色IE8

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

Figure 1

IE8

Figure2

這裏是工作jsfiddle 誰能告訴我如何解決這個問題?我在這裏做錯了什麼?任何幫助將不勝感激..

+0

可以請你提供的jsfiddle工作的例子。 – Gyandeep

+0

@Gyandeep:我用jsfiddle更新了這個問題 – Anand

回答

7

最後我得到了研究後回答了一天

的問題是,在jqplot選項一起使用的background屬性。

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