您好,我在 IE < 9 下遇到 HighCharts 问题。
Internet Explorer HighCharts 截图
HighCharts 在其他浏览器中运行良好 screenshot
如您所见,图表是在 IE 和 Chrome 中呈现的,但是.. 线条仅在 Chrome 中呈现,IE 的数据也必须存在,因为存在图例框(最佳出价,资格值......)
代码(顺便说一下,它是 erb 模板,所以我从 Rails 加载数据):
<script type="text/javascript">
"use strict";
var chart;
// assign data for current and qualification values
var qualificationTranslation = "<%= t(:qualification_value_nobr) %>";
var currentTranslation = "<%= t(:event_current_value) %>";
var qualificationValue = <%= @lot.qualification_value %>
var currentValue = <%= @lot.current_value %>
jQuery(document).ready(function() {
var parseChartData = function(data) {
var chartData = [];
jQuery.each(data, function(index, value) {
chartData.push({
x: Date.parse(value.x),
y: parseFloat(value.y),
formated_value: value.formated_value
});
});
return chartData;
};
var dataForChart = parseChartData(<%= raw data[:chart_data].to_json %>);
chart = new Highcharts.Chart({
chart: {
renderTo: 'chart',
type: 'line',
zoomType: 'x',
marginRight: 25
},
credits: {
enabled: false
},
title: {
text: "<%= t(:total_difference_progression_chart) %>",
x: -20 //center
},
xAxis: {
type: 'datetime',
labels: {
formatter: function() {
return Highcharts.dateFormat('%I:%M %p', this.value)
}
}
},
yAxis: {
title: {
text: "<%= t(:bid_value_price_per_uom_x_quantity, :symbol => @lot.event.currency.symbol) %>"
}
},
tooltip: {
formatter: function() {
var serieName = this.point.series.name;
// Don't show tooltip when you hover over qualification or current price
if(serieName == qualificationTranslation || serieName == currentTranslation) {
return false;
} else {
return '<b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat('%d %b %I:%M:%S %p', this.x) +
'<br/><b>'+ this.point.formated_value + '</b>';
}
}
},
legend: {
backgroundColor: '#FFFFFF',
verticalAlign: 'top',
y: 20,
shadow: true
},
plotOptions: {
series: {
step: true
}
},
series: [{
name: "<%= t(:best_bid) %>",
data: dataForChart
}]
});
// This function will add the current price and qualification price lines
var addOrUpdateSerie = function(name, value, serie) {
var data = []
data.push([chart.xAxis[0].min, value])
data.push([chart.xAxis[0].max, value])
var options = {
name: name,
type: 'spline',
dashStyle: 'shortdot',
marker: {enabled: false},
data: data
}
if(!serie) {
chart.addSeries(options);
} else {
serie.setData(data)
}
};
addOrUpdateSerie(qualificationTranslation, qualificationValue);
addOrUpdateSerie(currentTranslation, currentValue);
socket = io.connect(
ioServerAddr + '/charts',
{query: "lot_id=<%= @lot.id %>", secure: isProduction}
)
socket.on('connect', function() {
socket.emit('join', 'host_difference_progression_event_chart');
});
socket.on('<%= @lot.id %>/host_difference_progression_event_chart', function(data) {
// Add data to series
chart.series[0].setData(parseChartData(data.chart_data))
//Update hirizontal values
addOrUpdateSerie(qualificationTranslation, qualificationValue, chart.series[1])
addOrUpdateSerie(currentTranslation, currentValue, chart.series[2])
chart.redraw();
});
});
</script>
编辑:它不会引发错误
已解决: 问题出在 Date.parse() 因为 IE 使用其他格式。 http://www.ruby-doc.org/stdlib-1.9.3/libdoc/date/rdoc/Date.html#method-i-httpdate解决了这个问题