我正在使用 Highcharts 仪表。在 Chrome/Firefox/Safari 中完美工作 - 但仪表针不会出现在 IE 中。这在 PHP 中得到了回应。代码中的“//Add some life”部分全部设置为0，这样针就不会移动。
echo "<div id='gauges'><h2>Points Achievements
</h2><div id='junior' class='gauge'>
<script type='text/javascript'>
$(function () {
$('#junior').highcharts({
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false,
backgroundColor:'rgba(255, 255, 255, 0.1)'
},
credits: {
enabled: false
},
title: {
text: 'Junior Club Award'
},
pane: {
startAngle: -150,
endAngle: 150,
background: [{
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#FFF'],
[1, '#333']
]
},
borderWidth: 0,
outerRadius: '109%'
}, {
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#333'],
[1, '#FFF']
]
},
borderWidth: 1,
outerRadius: '107%'
}, {
// default background
}, {
backgroundColor: "; if($junior_sum >= 25){ echo "'#B1FCBC'";}else{ echo "'#DDD'"; } echo",
borderWidth: 0,
outerRadius: '101%',
innerRadius: "; if($junior_sum >= 25){ echo "'1%'";}else{ echo "'100%'"; } echo "
}]
},
// the value axis
yAxis: {
min: 0,
max: 25,
minorTickInterval: 'auto',
minorTickWidth: 1,
minorTickLength: 10,
minorTickPosition: 'inside',
minorTickColor: '#666',
tickPixelInterval: 30,
tickWidth: 2,
tickPosition: 'inside',
tickLength: 10,
tickColor: '#666',
labels: {
step: 2,
rotation: 'auto'
},
title: {
text: 'You have...'
},
plotBands: [{
from: 0,
to: " . $junior_sum .",
color: '#009FF5' // dark blue
},{
from: " . $junior_sum . " ,
to: 25,
color: '#92CFF0' // light blue
},
]
},
series: [{
name: 'Points Earned',
data: [" . $junior_sum . "],
tooltip: {
valueSuffix: ''
}
}]
},
// Add some life
function (chart) {
if (!chart.renderer.forExport) {
setInterval(function () {
var point = chart.series[0].points[0],
newVal,
inc = 0;
newVal = point.y + inc;
if (newVal < 0 || newVal > 200) {
newVal = point.y - inc;
}
point.update(newVal);
}, 3000);
}
});
});";
echo "</script></div>";
最佳答案
在代码的 plotBands 部分，您有一个悬空逗号:
plotBands: [{
from: 0,
to: " . $junior_sum .",
color: '#009FF5' // dark blue
}, {
from: " . $junior_sum . ",
to: 25,
color: '#92CFF0' // light blue
}, //here is your dangling comma
]
IE 对这些并不友善。由于没有列出带有数据的实际 js，因此 if 语句不会解析，但我也会检查那里是否有无效语法。如果可能的话，在 PHP 解析图表后，放置一个 jsFiddle，显示 js 的样子。
关于javascript - Highcharts 仪表在 IE8 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20957330/