nvd3图形无法在Firefox中正确加载

Hamchapman

请参阅此处,以获取一个简单示例的JSFiddle,该示例在Firefox中无法为我正确加载。它可以在JSFiddle和Chrome上完美运行,但不能在Firefox中运行。

在Firefox中,它只是在图表的最左侧(即基本上在y轴上)绘制了一些线,并说开始时间是31-12-1969 23:59:59。

让我认为Firefox创建Javascript日期的方式可能有所不同?远射...

谁能阐明为什么会这样?

代码在这里:

   nv.addGraph(function() {
      var chart = nv.models.lineChart()
        .margin({left: 100, bottom: 120})  
        .useInteractiveGuideline(true)  
        .transitionDuration(350)  
        .showLegend(true)       
        .showYAxis(true)        
        .showXAxis(true);

      chart.xAxis 
        .rotateLabels(-45)
        .tickFormat(function(d) { return d3.time.format('%d-%m-%Y %H:%M:%S')(new Date(d)) });

      chart.yAxis
        .axisLabel('Latency (ms)')
        .tickFormat(d3.format('.0f'));

      var service1Data = {"values":[{"x":"2014-03-03 10:00:00 UTC","y":100},{"x":"2014-03-03 11:00:00 UTC","y":200},{"x":"2014-03-03 20:00:00 UTC","y":50}],"key":"service1","color":"#ff7f0e"};
      var service2Data = {"values":[{"x":"2014-03-03 10:00:00 UTC","y":200},{"x":"2014-03-03 11:00:00 UTC","y":300}],"key":"service2","color":"#3c9fad"};


      // Make the dates easy for d3 to work with
      service1Data["values"].forEach(function(hash) {
        hash["x"] = new Date(hash["x"]);
      });

      service2Data["values"].forEach(function(hash) {
        hash["x"] = new Date(hash["x"]);
      });

      var serviceData = [service1Data, service2Data];

      d3.select('#chart_latency svg')    
        .datum(serviceData)         
        .call(chart);

      //Update the chart when window resizes.
      nv.utils.windowResize(function() { chart.update() });
      return chart;
    });
阿米莉亚

您要依靠浏览器的内部Date构造函数从字符串创建日期,因此要依靠其内部的Date解析函数尽管Chrome能够找出您的非标准日期字符串,但Firefox却无法。

您可以通过使用避免歧义D3日期格式对象做日期解析:

var dateFormatIn =  d3.time.format.utc('%Y-%m-%d %H:%M:%S UTC');

  service2Data["values"].forEach(function(hash) {
    hash["x"] =  dateFormatIn.parse(hash["x"]);
  });

http://jsfiddle.net/yzA32/4/

顺便说一句,您无需使用for循环遍历数据数组和解析日期,而只需在图表对象上设置x-accessor函数即可:

      var chart = nv.models.lineChart()
            .x(function(d){return dateFormatIn.parse(d.x);})

http://jsfiddle.net/yzA32/5/

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

将Json数据加载到nvd3图形中

来自分类Dev

nvd3,时间序列数据的lineWithFocusChart无法正确显示

来自分类Dev

nvd3,时间序列数据的lineWithFocusChart无法正确显示

来自分类Dev

NVD3图表在隐藏选项卡中无法正确呈现

来自分类Dev

如何更改nvd3图形中标签的位置?

来自分类Dev

将MySQL加载到JSON以获取NVD3

来自分类Dev

NVD3-使用修改后的JSON数据的图形无法正确显示

来自分类Dev

无法更改图例符号nvd3气泡图

来自分类Dev

无法水平绘制参考线nvd3气泡图

来自分类Dev

无法在R Shiny中渲染rcharts / nvd3图

来自分类Dev

无法水平绘制参考线nvd3气泡图

来自分类Dev

JQueryUi 自动完成组合框有时无法在 Firefox 中正确加载

来自分类Dev

标头无法在Firefox中正确显示

来自分类Dev

按钮无法在 Firefox 中正确显示

来自分类Dev

无法在javascript中正确加载图像

来自分类Dev

jQuery无法在IE中正确加载

来自分类Dev

图片无法在HTML中正确加载

来自分类Dev

如何在堆叠式多条形图中显示值-nvd3图形

来自分类Dev

如何在nvd3图形中更改图例的宽度

来自分类Dev

图形上的NVD3多轴条形图重叠条

来自分类Dev

如何将JSON数据馈送到nvd3图形代码

来自分类Dev

如何在nvd3图形中更改图例的宽度

来自分类Dev

nvd3馅饼externalRadius

来自分类Dev

SVG 的 NVD3 样式

来自分类Dev

nvd3 chart.useInteractiveGuideline(true); 更新不正确

来自分类Dev

nvd3时间H:M:S在轴上显示不正确

来自分类Dev

nvd3 chart.useInteractiveGuideline(true); 更新不正确

来自分类Dev

nvd3多条形图带有堆叠选项,条形显示不正确

来自分类Dev

nvd3时间H:M:S在轴上显示不正确