jqplot图形背景在ie8中似乎是黑色的 [英] jqplot graph background seems to be black in ie8
问题描述
$（document）.ready（function（）{我的网站使用jqplot，
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，
//将对plot1的调用绘制动画。 replot（{resetAxes：true}）
animateReplot：true，
seriesDefaults：{
pointLabels：{
show：true，
hideZeros：true，
位置：'s'，
ypadding：12
}，
渲染器：$ .jqplot.BarRen derer，
rendererOptions：{
varyBarColor：true，
barPadding：-20
}
}，
轴：{
xaxis：{
label：'X轴'，
fontFamily：'OpenSans-Regular'，
textColor：'＃414141'，
渲染器：$ .jqplot.CategoryAxisRenderer，
labelRenderer：$ .jqplot.CanvasAxisLabelRenderer，
tickRenderer：$ .jqplot.CanvasAxisTickRenderer，
ticks：xticks，
tickOptions：{
fontFamily：'OpenSans-Regular'，
textColor：'＃414141'，
角度：-90，
fontSize：'10pt'
}
}，
yaxis：{
min：0，
//最大值：30，
tickInterval：5，
标签：'Y轴'，
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
/ *
*显示x和y值都是showTooltipDataPosit ion：true，
* showVerticalLine：true，useAxesFormatters：true
* /
}，
图例：{
渲染器：$ .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']，
系列：[{
seriesColors：[＃D85252]，
//标签：'s1'，
颜色：['＃D85252']
}，{
seriesColors：[＃F6BD0F]，
标签：'s2'，
颜色：['＃F6BD0F']
}]，
highlighter：{
show：false
}
}
）;
}）;
在Firefox和IE9中运行正常，没有任何问题，如图1所示。但在IE8中，它看起来非常糟糕，如图2所示。
我已经包含excanvas.js如下：
< script type =text / javascriptlanguage =javascriptsrc =jQuery / jQplot / excanvas.min.js>< / script>
IE9和Firefox
IE8
以下是工作的 jsfiddle
任何人都可以告诉我如何解决这个问题？我在这里做错了什么？任何帮助将不胜感激。
最后，我在研究了一天之后得到了答案
问题出在jqplot选项中使用的背景属性。
网格：{
背景：'透明'，
gridLineColor：'＃c5c5c5'
}
我通过替换'transparent'在我的代码中使用'rgba（255,255,255,0.1）'，它可以在包括IE8在内的所有浏览器中使用。同样的事情可以通过使用 background：url（'blank.gif'）
来实现以下链接
- IE浏览器的CSS错误背景色透明行为不同于背景 - 颜色
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..
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
Highcharts chart option backgroundColor:'transparent' showing black on IE 8
IE CSS bug background color transparent behaves differently to background-color
这篇关于jqplot图形背景在ie8中似乎是黑色的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
