nv.d3代碼時間格式問題

window.onload = function() { 


    var par = null ; 
    var recieved = null; 
    var Time = [1,2,3]; 
    //var Time = ['1:00', '2:00', '2:30']; 
    var Sale = [200,150,300]; 
    var data; 
    var ThroughputLine1 = []; 

    nv.addGraph(function() { 
    var chart = nv.models.lineChart() 
      .options({ 
       transitionDuration: 300, 
       useInteractiveGuideline: false 
      }) 


     //.x(function(d) { return d[0] }) //We can modify the data accessor functions... 
     // .y(function(d) { return d[1] }); //...in case your data is 

     // chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately 
     chart.xAxis 
      .axisLabel("Time") 
      //.tickValues([1,2,3,4,5,6,7,8,9,10]) 
      .tickFormat(function(d) { return d3.time.format('%x')}) 
      // .tickFormat(function(d){ d3.format(',.2f')(d)}) 
      .staggerLabels(true) 
     ; 

     chart.yAxis 
      .axisLabel('Lbs') 
      .tickFormat(function(d) { 
       if (d == null) { 
        return 'N/A'; 
       } 
       return d3.format(',.1f')(d); 
      }) 
     ; 

      data = data(); 

     d3.select('#chart1').append('svg') 
      .datum(data) 
      .call(chart); 
     nv.utils.windowResize(chart.update); 

     return chart; 
    }); 


    function data(){ 
     var temp; 
      for(var i=0; i < Time.length;i++){ 
        var time = Time[i]; 
        var sale = Sale[i]; 
        temp={'x':time, 'y':sale}; 
        ThroughputLine1.push(temp); 
       } 

     //} 

     return [{ 
         values: ThroughputLine1, 
         key: "Bagger 1", 
         color: "#2ca02c" 
         }]; 
    } 

}

所以我有很多麻煩，讓我的工作方式，我需要它的工作。截至目前，此代碼會生成一個包含數據的單個圖。但是，只要我從Time數組更改爲Time2數組，我會遇到很多錯誤，如錯誤：屬性轉換的無效值=「translate（NaN，106.66666666666669）」和未捕獲的TypeError：無法讀取屬性'x 「空的nv.d3代碼時間格式問題

這裏測試的目的，我的html：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8" content="HTML,CSS,XML,JavaScript"> 
    <meta http-equiv="refresh" content="43200"> 
    <link rel="stylesheet" type="text/css" href="Styles/Design.css"> 
    <link href="Styles/nv.d3.css" rel="stylesheet" type="text/css"> 
    <link href="Styles/lineChart.css" rel="stylesheet" type="text/css"> 
    <script src="Scripts/jquery.js" type="text/javascript"></script> 
    <script src="Scripts/testTime.js" type="text/javascript"></script> 
    <!--<script src="Scripts/lineChart.js" type="text/javascript"></script> --> 
    <script src="scripts/d3.min.js" charset="utf-8"></script> 
    <script src="scripts/nv.d3.js"></script> 
</head> 
    <body class='with-3d-shadow with-transitions'> 
    <div id="wrapperTV2"></div> 
     <center> 
      <div id="through">Throughput lbs/hr</div> 
      <div id="chart1"></div><br><br><br><br> 
      <div id="downt">Downtime %</div> 
      <div id="chart2"></div><br><br><br><br> 
      <div id="other">Other</div> 
      <div id="chart3"></div> 
     </center> 
    </body> 
</html>

來源

2015-09-02 Ali Aslam

D3不知道你的第二個陣列，使之在時代人類可讀的時代的字符串值做（因此爲NaN ）。你可以做些什麼時代解析成數如下所示：

function timeStringToSeconds(str){ 
     var minutesSeconds = str.split(':'); 
     // the + coerces the string to a number 
     return (+minutesSeconds[0])*60 + (+minutesSeconds[1]); 
    } 

    var temp; 
    for(var i=0; i < Time.length;i++){ 
     var time = timeStringToSeconds(Time[i]); 
     var sale = Sale[i]; 
     temp={'x':time, 'y':sale}; 
     ThroughputLine1.push(temp); 
    }

看到這個普拉克一個真人版：http://plnkr.co/edit/NodYtY9DiUg7mBPViLnq?p=preview

來源

2015-09-07 06:32:54 Lucas

nv.d3代碼時間格式問題

回答

相關問題