你好我在IE下的HighCharts有问题< 9。
Internet explorer HighCharts screenshot
HighCharts works fine in other browsers 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解决了问题
答案 0 :(得分:0)
已解决:问题出在Date.parse()上,因为IE使用其他格式。 http://www.ruby-doc.org/stdlib-1.9.3/libdoc/date/rdoc/Date.html#method-i-httpdate解决了问题
答案 1 :(得分:-1)
我找到了在IE7,IE8等上渲染Highcharts的解决方案!
添加:
<meta http-equiv="X-UA-Compatible" content="chrome=IE7">
我不知道为什么这样有效,但它有效:)