IE < 9 + HighCharts无法渲染系列。

6

你好,我在IE < 9浏览器下使用HighCharts遇到了问题。

Internet explorer HighCharts截图

其他浏览器 HighCharts正常运行的截图

如您所见,在Chrome和IE中都渲染出了图表,但是......线条只在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 解决了这个问题。


https://dev59.com/6l_Va4cB1Zd3GeqPPxRV#8790973 - Bill the Lizard
2
你应该添加一个答案并接受它,这样问题就不会出现在“未回答”列表中。 - Dziad Borowy
2个回答

0

-1

我找到了在IE7、IE8和更高版本上渲染Highcharts的解决方案!

添加以下内容:

<meta http-equiv="X-UA-Compatible" content="chrome=IE7">

我不知道为什么它能够运行,但它确实可以运行 :)


1
你能否发布那些解决方案?现在这个答案是空的。 - Slater Victoroff

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接