6

こんにちは、IE < 9 で HighCharts に問題があります。

Internet Explorer HighCharts スクリーンショット

HighCharts は他のブラウザーのスクリーンショットで正常に動作します

ご覧のとおり、グラフは 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>

編集:エラーは発生しません

解決済み: IE が他の形式を使用しているため、問題は Date.parse() にありました。 http://www.ruby-doc.org/stdlib-1.9.3/libdoc/date/rdoc/Date.html#method-i-httpdateは問題を解決しました

4

2 に答える 2

0

解決済み: IE が他の形式を使用しているため、問題は Date.parse() にありました。http://www.ruby-doc.org/stdlib-1.9.3/libdoc/date/rdoc/Date.html#method-i-httpdateは問題を解決しました

于 2012-12-14T13:46:19.283 に答える
-1

IE7、IE8などでハイチャートをレンダリングするソリューションを見つけました!

これを追加 :

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

なぜこれが機能するのかわかりませんが、機能します:)

于 2013-07-25T13:51:01.357 に答える