2
我有隻似乎影響Internet Explorer 8中Highcharts在Internet Explorer中不呈現
我已經使用了highcharts.js腳本http://www.highcharts.com/但是我試圖顯示這個數據顯示在我的網站數據的問題燈箱內，並使用從http://buckwilson.me/lightboxme/
的lightbox_me.js劇本我會盡量表現出我所使用的代碼：
<script type="text/javascript">
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'analysis',
defaultSeriesType: 'bar',
backgroundColor: 'rgba(0,0,0,0)'
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
categories: ['First Impressions', 'Politeness/Courtesy', 'Helpfulness', 'Speed and Efficiency', 'Reliability', 'Trustworthiness', 'Value for Money', 'Quality of service', 'After Sales', 'Overall Satisfaction'],
title: {
text: null
}
},
yAxis: {
min: 0,
max:100,
title: {
text: 'Overall Score (%)',
align: 'middle'
}
},
tooltip: {
formatter: function() {
return ''+
this.y +' %';
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: false
}
}
},
legend: {
enabled: false,
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -100,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: false
},
credits: {
enabled: false
},
series: [{
name: 'Year 2012',
data: [<?php echo "$first_impression".","."$politeness".","."$knowledge".","."$speed".","."$reliability".","."$honesty".","."$value".","."$quality".","."$after_sales".","."$satisfaction"; ?>]
}]
});
});
</script>
正如你所看到的，我已經使用PHP插入統計。
然後我有收藏腳本：
$('#scores_button').click(function(e) {
$('#scores_container').lightbox_me({
centered: true,
onLoad: function() {
$('#scores_container').find('input:first').focus()
}
});
e.preventDefault();
});
這是HTML：
<div id='scores_container'>
<h1 class='lightbox_header'>Areas of Performance</h1>
<div id='analysis'>
</div>
<p class='lightbox_paragraph'>We asked all repondents to score the business on it's performance in the areas above. This chart shows the average scores in each area.</p>
<a id='close_x' class='close sprited' href='#'>close</a>
</div>
最後我的CSS
#scores_container {
width:760px;
display:none;
background-color:#f2f5f7;
padding:30px 40px 40px 40px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: 1px solid #536376;
-webkit-box-shadow: rgba(0,0,0,.6) 0px 2px 12px;
-moz-box-shadow: rgba(0,0,0,.6) 0px 2px 12px;
box-shadow: rgba(0,0,0,.6) 0px 2px 12px;
position:absolute;
top:0px;
left:0px;
}
h1.lightbox_header{
font-size:22px;
font-weight:bold;
color:#536376;
margin-bottom:20px;
border-bottom:1px solid #cdd0d9;
padding-bottom:10px;
}
#analysis{
width:680px;
height:400px;
}
p.lightbox_paragraph, p.lightbox_paragraph_first{
font-family: 'PT Sans', sans-serif;
font-weight:700;
font-style:italic;
color:#536376;
border-top:1px solid #cdd0d9;
padding-top:10px;
}
此代碼工作在所有瀏覽器我已經測試但Internet Explorer。 Internet Explorer 8是我一直在嘗試尋找解決方案時使用的瀏覽器。
請看這張截圖它是如何出現在IE8：
它如何出現在谷歌瀏覽器：
我的想法是，也許這是我的CSS造成這個問題，但無論我嘗試什麼，我似乎都無法讓圖表顯示出來。圖表容器在瀏覽器窗口中也不是垂直居中，但是一旦我得到圖表進行渲染，這是我可以使用的。任何幫助將非常感激。
我知道這是不是因爲我只是學習，但請參見下面的鏈接網站本身特別精心打造的網站，如果它會幫助：http://www.bbg.im/development
該錯誤是發生在個人資料頁時，圖表圖標被點擊。
我也在使用相同的燈箱腳本遇到與餅圖和谷歌地圖相同/類似的問題。
非常感謝。
哪裏是單擊除展示收藏... – 2013-03-20 10:58:42
@Rohit阿扎德你好。對不起，但我不確定你在問我什麼。我有一個ID爲#scores_button的div，點擊時會啓動lightbox_me腳本。 – 2013-03-20 11:12:12
我可以看到你在IE中有錯誤，你可以使用[this]（http://code.highcharts.com/highcharts.src.js）lib並從IE複製錯誤？ – 2013-03-20 11:17:56