IE< 9 + HighCharts不渲染系列

时间:2012-11-23 11:07:02

标签: javascript internet-explorer internet-explorer-8 internet-explorer-7 highcharts

你好我在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解决了问题

2 个答案:

答案 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">

我不知道为什么这样有效,但它有效:)