我用 highcharts 制作了一个时间序列图表。
它适用于 FF,但它不能在 IE9 中运行。这里可能是什么问题?
http://jsfiddle.net/sbra/tcFju/
jsfiddle 上的完整代码:这里的代码段:
$(function () {
$(document).ready(function() {
var jsData = JSON.parse('{"data":[{"dateTime":1035151200001,"value":0.737},{"dateTime":1358722800001,"value":1.374},{"dateTime":1359327600001,"value":1.374},{"dateTime":1360537200001,"value":1.38}]}'.valueOf());
console.log(jsData);
var chartData = [];
for (i in jsData.data) {
chartData.push( [ new Date(jsData.data[i].dateTime).getTime(), jsData.data[i].value ] );
}
chart = new Highcharts.Chart({
chart: {
renderTo: 'tsc_chartDiv',
zoomType: 'x',
spacingRight: 20,
spacingLeft: 20,
marginLeft: 200
},
title: {
text: 'xyz'
},
subtitle: {
text: document.ontouchstart === undefined ?
'Click and drag in the plot area to zoom in' :
'Drag your finger over the plot to zoom in'
},
credits: { text: '-.com', href: '' },
xAxis: {
type: 'datetime',
maxZoom: '1209600000', // fourteen days
title: {
text: null
}
},
yAxis: {
title: {
text: ''
},
plotBands: [{
color: 'rgba(253, 195, 156, .6)',
from: 1.5,
label: {
text: 'High'
},
to: 1000},
{
from: 1.4,
label: {
text: 'Normaal'
},
to: 1.5},
{
color: 'rgba(196, 243, 112, .6)',
from: 0,
label: {
text: 'Low'
},
to: 1.4}],
showFirstLabel: false
},
tooltip: {
shared: true
},
legend: {
enabled: true
},
plotOptions: {
area: {
fillColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, 'rgba(2,0,0,0)']
]
},
lineWidth: 1,
marker: {
enabled: false,
states: {
hover: {
enabled: true,
radius: 5
}
}
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [{
type: 'area',
name: 'xyz',
data: chartData
}]
});
var startx = 0;
var starty = 20;
var roundedVal = 0;
chart.renderer.text('Index (I) Änderung:', startx + 20, starty + 20).add();
roundedVal = (Math.round(parseFloat("0.004366812227074135")*1000)/10).toFixed(1);
console.log(roundedVal);
if (roundedVal >= 0.1) {
chart.renderer.image("images/chart/up.png", startx + 20, starty + 40, 50, 50).add();
}
else if (!(roundedVal>=-0.1)) {
chart.renderer.image("images/chart/down.png", startx + 20, starty + 40, 50, 50).add();
} else {
chart.renderer.image("images/chart/equal.png", startx + 20, starty + 40, 50, 50).add();
}
chart.renderer.text(roundedVal + "%", startx + 100, starty + 75).css({
fontWeight: 'bold',
fontSize: '20px',
}).add();
chart.renderer.text('I-Aktuell:', startx + 20, starty + 120).add();
roundedVal = (Math.round(parseFloat("1.38")*1000)/1000).toString();
chart.renderer.text(roundedVal, startx + 20, starty + 160).css({
fontWeight: 'bold',
fontSize: '30px',
}).add();
chart.renderer.text('I-Zuletzt:', startx + 20, starty + 200).add();
roundedVal = (Math.round(parseFloat("1.374")*1000)/1000).toString();
chart.renderer.text(roundedVal, startx + 100, starty + 200).add();
chart.renderer.text('I-Höchst:', startx + 20, starty + 220).add();
roundedVal = (Math.round(parseFloat("1.466")*1000)/1000).toString();
chart.renderer.text(roundedVal, startx + 100, starty + 220).add();
chart.renderer.text('I-Tiefst:', startx + 20, starty + 240).add();
roundedVal = (Math.round(parseFloat("0.685")*1000)/1000).toString();
chart.renderer.text(roundedVal, startx + 100, starty + 240).add();
chart.renderer.text('I-AVG:', startx + 20, starty + 260).add();
roundedVal = (Math.round(parseFloat("1.0567862745098051")*1000)/1000).toString();
chart.renderer.text(roundedVal, startx + 100, starty + 260).add();
});
});
谢谢斯蒂芬