nvd3圖形在firefox中無法正確加載

請參閱here，這是一個簡單示例的JSFiddle，它無法在Firefox中正確加載。它在JSFiddle和Chrome中完美工作，但不在Firefox中。nvd3圖形在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; 
    });

來源

2014-03-04 hamchapman

它看起來像是你的時間戳的問題。 – shabeer90

以什麼方式？日期適用於JSFiddle和Chrome。我更新了小提琴，以便它將日期記錄到控制檯，並且您可以看到它們正在正確創建。 – hamchapman

你依靠瀏覽器的內部Date constructor在其內部Date parsing function從字符串的日期，因此。雖然Chrome能夠找出你的非標準日期字符串，但Firefox不能。

您可以通過使用一個D3 date format object做日期解析避免歧義：

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存取函數圖表對象：

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

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

來源

2014-03-04 16:48:45 AmeliaBR

謝謝！這工作完美，讓我重構我的代碼很好的負載。 – hamchapman

nvd3圖形在firefox中無法正確加載

回答

相關問題