Highcharts无法在Internet Explorer中呈现
我有一个问题似乎只影响Internet Explorer 8。
我使用http://www.highcharts.com/中的highcharts.js脚本在我的网站上显示数据，但是我试图在灯箱中显示这些数据，并使用了来自http：// buckwilson的lightbox_me.js脚本.ME / lightboxme /
我将尝试显示我使用的代码：
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插入统计数据。
然后我有灯箱脚本：
$('#scores_button').click(function(e) { $('#scores_container').lightbox_me({ centered: true, onLoad: function() { $('#scores_container').find('input:first').focus() } }); e.preventDefault(); });
这是html：
Areas of Performance
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.
close
最后我的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中出现的截图：
以及它在Google Chrome中的显示方式：
我的想法是，也许这是我的CSS导致问题，但无论我尝试什么，我似乎无法得到图表显示。 图表容器也没有在浏览器窗口中垂直居中，但这是我可以处理的图表，一旦我得到图表进行渲染。 任何帮助将非常感激。
我知道这不是一个特别精心打造的网站，因为我只是在学习，但请看看以下链接到网站本身，如果它会有所帮助： http ： //www.bbg.im/development
单击图表图标时，配置文件页面上发生错误。
我也在同一个灯箱脚本中遇到与饼图和谷歌地图相同/类似的问题。
非常感谢。
刚查看了HTML文件的来源，惊讶地发现数组中有额外的逗号。
series: [{ name: 'Year 2012', data: [95,100,95,95,95,100,80,90,93,] }]
你能否删除数据数组末尾的尾随逗号。 即数据数组应该像这样呈现。
series: [{ name: 'Year 2012', data: [95,100,95,95,95,100,80,90,93] }]