jjzjj

javascript - IE < 9 + HighCharts 不渲染系列

coder 2025-01-22 原文

您好,我在 IE < 9="" 下使用="" highcharts="">

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解决了问题

最佳答案

已解决:问题出在 Date.parse() 上,因为 IE 使用其他格式。 http://www.ruby-doc.org/stdlib-1.9.3/libdoc/date/rdoc/Date.html#method-i-httpdate解决了问题

关于javascript - IE < 9 + HighCharts 不渲染系列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13527830/

有关javascript - IE < 9 + HighCharts 不渲染系列的更多相关文章

  1. python - 如何使用 Ruby 或 Python 创建一系列高音调和低音调的蜂鸣声? - 2

    关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题?更新问题,以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我想在固定时间创建一系列低音和高音调的哔哔声。例如:在150毫秒时发出高音调的蜂鸣声在151毫秒时发出低音调的蜂鸣声200毫秒时发出低音调的蜂鸣声250毫秒的高音调蜂鸣声有没有办法在Ruby或Python中做到这一点?我真的不在乎输出编码是什么(.wav、.mp3、.ogg等等),但我确实想创建一个输出文件。

  2. ruby-on-rails - 渲染另一个 Controller 的 View - 2

    我想要做的是有2个不同的Controller,client和test_client。客户端Controller已经构建,我想创建一个test_clientController,我可以使用它来玩弄客户端的UI并根据需要进行调整。我主要是想绕过我在客户端中内置的验证及其对加载数据的管理Controller的依赖。所以我希望test_clientController加载示例数据集,然后呈现客户端Controller的索引View,以便我可以调整客户端UI。就是这样。我在test_clients索引方法中试过这个:classTestClientdefindexrender:template=>

  3. ruby-on-rails - 如何从 format.xml 中删除 <hash></hash> - 2

    我有一个对象has_many应呈现为xml的子对象。这不是问题。我的问题是我创建了一个Hash包含此数据,就像解析器需要它一样。但是rails自动将整个文件包含在.........我需要摆脱type="array"和我该如何处理?我没有在文档中找到任何内容。 最佳答案 我遇到了同样的问题;这是我的XML:我在用这个:entries.to_xml将散列数据转换为XML,但这会将条目的数据包装到中所以我修改了:entries.to_xml(root:"Contacts")但这仍然将转换后的XML包装在“联系人”中,将我的XML代码修改为

  4. ruby-on-rails - 如何优雅地重启 thin + nginx? - 2

    我的瘦服务器配置了nginx,我的ROR应用程序正在它们上运行。在我发布代码更新时运行thinrestart会给我的应用程序带来一些停机时间。我试图弄清楚如何优雅地重启正在运行的Thin实例,但找不到好的解决方案。有没有人能做到这一点? 最佳答案 #Restartjustthethinserverdescribedbythatconfigsudothin-C/etc/thin/mysite.ymlrestartNginx将继续运行并代理请求。如果您将Nginx设置为使用多个上游服务器,例如server{listen80;server

  5. ruby-on-rails - 使用一系列等级计算字母等级 - 2

    这里是Ruby新手。完成一些练习后碰壁了。练习:计算一系列成绩的字母等级创建一个方法get_grade来接受测试分数数组。数组中的每个分数应介于0和100之间,其中100是最大分数。计算平均分并将字母等级作为字符串返回,即“A”、“B”、“C”、“D”、“E”或“F”。我一直返回错误:avg.rb:1:syntaxerror,unexpectedtLBRACK,expecting')'defget_grade([100,90,80])^avg.rb:1:syntaxerror,unexpected')',expecting$end这是我目前所拥有的。我想坚持使用下面的方法或.join,

  6. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中,我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时,它会自然地以HTML呈现。但是,当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法),我仍然将HTML作为响应。如何获取JSON作为响应?我还需要说明什么? 最佳答案 您应该将.json附加到请求的url,提供的格式在routes.rb的路径中定义。这

  7. ruby-on-rails - Nokogiri:使用 XPath 搜索 <div> - 2

    我使用Nokogiri(Rubygem)css搜索寻找某些在我的html里面。看起来Nokogiri的css搜索不喜欢正则表达式。我想切换到Nokogiri的xpath搜索,因为这似乎支持搜索字符串中的正则表达式。如何在xpath搜索中实现下面提到的(伪)css搜索?require'rubygems'require'nokogiri'value=Nokogiri::HTML.parse(ABBlaCD3"HTML_END#my_blockisgivenmy_bl="1"#my_eqcorrespondstothisregexmy_eq="\/[0-9]+\/"#FIXMEThefoll

  8. 世界前沿3D开发引擎HOOPS全面讲解——集3D数据读取、3D图形渲染、3D数据发布于一体的全新3D应用开发工具 - 2

    无论您是想搭建桌面端、WEB端或者移动端APP应用,HOOPSPlatform组件都可以为您提供弹性的3D集成架构,同时,由工业领域3D技术专家组成的HOOPS技术团队也能为您提供技术支持服务。如果您的客户期望有一种在多个平台(桌面/WEB/APP,而且某些客户端是“瘦”客户端)快速、方便地将数据接入到3D应用系统的解决方案,并且当访问数据时,在各个平台上的性能和用户体验保持一致,HOOPSPlatform将帮助您完成。利用HOOPSPlatform,您可以开发在任何环境下的3D基础应用架构。HOOPSPlatform可以帮您打造3D创新型产品,HOOPSSDK包含的技术有:快速且准确的CAD

  9. 【鸿蒙应用开发系列】- 获取系统设备信息以及版本API兼容调用方式 - 2

    在应用开发中,有时候我们需要获取系统的设备信息,用于数据上报和行为分析。那在鸿蒙系统中,我们应该怎么去获取设备的系统信息呢,比如说获取手机的系统版本号、手机的制造商、手机型号等数据。1、获取方式这里分为两种情况,一种是设备信息的获取,一种是系统信息的获取。1.1、获取设备信息获取设备信息,鸿蒙的SDK包为我们提供了DeviceInfo类,通过该类的一些静态方法,可以获取设备信息,DeviceInfo类的包路径为:ohos.system.DeviceInfo.具体的方法如下:ModifierandTypeMethodDescriptionstatic StringgetAbiList​()Obt

  10. ruby - 使用 `+=` 和 `send` 方法 - 2

    如何将send与+=一起使用?a=20;a.send"+=",10undefinedmethod`+='for20:Fixnuma=20;a+=10=>30 最佳答案 恐怕你不能。+=不是方法,而是语法糖。参见http://www.ruby-doc.org/docs/ProgrammingRuby/html/tut_expressions.html它说Incommonwithmanyotherlanguages,Rubyhasasyntacticshortcut:a=a+2maybewrittenasa+=2.你能做的最好的事情是:

随机推荐