Highcharts不在Internet Explorer中呈现 [英] Highcharts not rendering in internet explorer
问题描述
我有一个似乎只影响Internet Explorer 8的问题。
我使用
单击图表图标时，错误发生在个人资料页面上。
我也遇到与饼图和谷歌相同/相似的问题地图在相同的灯箱脚本中。
非常感谢。
刚刚查看了HTML文件的源代码，并惊讶地看到数组中额外的逗号。
系列：[{
名称：'2012年'，
数据：[95,100,95,95,95,100,80,90， 93，]
}]
数据数组末尾的逗号。即数据数组应该像这样呈现。
系列：[{
姓名：'2012年'，
数据：[95,100,95,95,95,100,80,90,93]
}]
I have an issue that only seems to affect internet explorer 8.
I have used the highcharts.js script from http://www.highcharts.com/ to display data on my site however I have tried to display this data within a lightbox and have used the lightbox_me.js script from http://buckwilson.me/lightboxme/
I will try to show the code I have used:
<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>
As you can see, I have used php to insert the stats.
I then have the lightbox script:
$('#scores_button').click(function(e) {
$('#scores_container').lightbox_me({
centered: true,
onLoad: function() {
$('#scores_container').find('input:first').focus()
}
});
e.preventDefault();
});
This is the 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>
And finally my 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;
}
This code works in all browsers I have tested but internet explorer. Internet explorer 8 is the browser that I have been using whilst trying to find a solution.
Please see this screenshot of how it appears in ie8:
And how it appears in Google Chrome:
My thoughts are that maybe it is my css causing the problem but no matter what I try I can't seem to get the chart to display. The chart container is also not centered vertically within the browser window but this is something I can work on once I get the chart to render. Any help would be much appreciated.
I know it's not a particularly well built site as I am only learning but please see the following link to the site itself, if it will help: http://www.bbg.im/development
The error is occurring on the profile pages when the chart icon is clicked.
I also am experiencing the same/similar issue with pie charts and google maps in the same lightbox script.
Many thanks.
Just viewed the source of the HTML file and surprised to see the extra comma in the array.
series: [{
name: 'Year 2012',
data: [95,100,95,95,95,100,80,90,93,]
}]
Could you please remove the trailing comma at the end of the data array. i.e. the data array should render like this.
series: [{
name: 'Year 2012',
data: [95,100,95,95,95,100,80,90,93]
}]
这篇关于Highcharts不在Internet Explorer中呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
