2013-05-15 82 views
1

我必須在「Line Plus條形圖」中添加適當的時間線,這意味着日期必須平均分佈在x軸上。 例如AAPL股息歷史。 enter image description here 由於AAPL在1995年至2012年間沒有付款,應該有空白。所以我需要根據第一個和最後一個日期傳播x軸。這樣的事情: enter image description here 有沒有辦法顯示X軸固定在真正的日期,忽略數據?NVD3 Line Plus條形圖時間線

還是我需要將0值添加到我的dividend_set?這是我的dividend_set數據。

<script type="text/javascript"> 
    function exampleData() { 
     return [ 
      { 
       "key" : "Dividends" , 
       "bar": true, 
       "values" : [ 

         [ 547707600000 , 0.015 ] , 

         [ 555570000000 , 0.015 ] , 

         [ 564127200000 , 0.02 ] , 

         [ 571644000000 , 0.02 ] , 

         [ 579762000000 , 0.02 ] , 

         [ 587624400000 , 0.02 ] , 

         [ 596095200000 , 0.025 ] , 

         [ 603698400000 , 0.025 ] , 

         [ 611816400000 , 0.025 ] , 

         [ 619678800000 , 0.025 ] , 

         [ 627285600000 , 0.0275 ] , 

         [ 635148000000 , 0.0275 ] , 

         [ 643266000000 , 0.0275 ] , 

         [ 651128400000 , 0.0275 ] , 

         [ 658735200000 , 0.03 ] , 

         [ 666597600000 , 0.03 ] , 

         [ 674715600000 , 0.03 ] , 

         [ 682578000000 , 0.03 ] , 

         [ 690444000000 , 0.03 ] , 

         [ 698047200000 , 0.03 ] , 

         [ 707374800000 , 0.03 ] , 

         [ 714027600000 , 0.03 ] , 

         [ 723103200000 , 0.03 ] , 

         [ 729496800000 , 0.03 ] , 

         [ 738565200000 , 0.03 ] , 

         [ 745477200000 , 0.03 ] , 

         [ 753688800000 , 0.03 ] , 

         [ 760600800000 , 0.03 ] , 

         [ 770014800000 , 0.03 ] , 

         [ 776926800000 , 0.03 ] , 

         [ 785138400000 , 0.03 ] , 

         [ 792655200000 , 0.03 ] , 

         [ 801464400000 , 0.03 ] , 

         [ 808549200000 , 0.03 ] , 

         [ 816933600000 , 0.03 ] , 

         [ 1344488400000 , 2.65 ] , 

         [ 1352268000000 , 2.65 ] , 

         [ 1360216800000 , 2.65 ] 

       ] 
      } , 

      { 
       "key" : "Dividends together" , 
       "values" : [ 


          [ 547707600000 , 
           0.015 ] 
          , 

          [ 555570000000 , 
           0.03 ] 
          , 

          [ 564127200000 , 
           0.05 ] 
          , 

          [ 571644000000 , 
           0.07 ] 
          , 

          [ 579762000000 , 
           0.09 ] 
          , 

          [ 587624400000 , 
           0.11 ] 
          , 

          [ 596095200000 , 
           0.135 ] 
          , 

          [ 603698400000 , 
           0.16 ] 
          , 

          [ 611816400000 , 
           0.185 ] 
          , 

          [ 619678800000 , 
           0.21 ] 
          , 

          [ 627285600000 , 
           0.2375 ] 
          , 

          [ 635148000000 , 
           0.265 ] 
          , 

          [ 643266000000 , 
           0.2925 ] 
          , 

          [ 651128400000 , 
           0.32 ] 
          , 

          [ 658735200000 , 
           0.35 ] 
          , 

          [ 666597600000 , 
           0.38 ] 
          , 

          [ 674715600000 , 
           0.41 ] 
          , 

          [ 682578000000 , 
           0.44 ] 
          , 

          [ 690444000000 , 
           0.47 ] 
          , 

          [ 698047200000 , 
           0.5 ] 
          , 

          [ 707374800000 , 
           0.53 ] 
          , 

          [ 714027600000 , 
           0.56 ] 
          , 

          [ 723103200000 , 
           0.59 ] 
          , 

          [ 729496800000 , 
           0.62 ] 
          , 

          [ 738565200000 , 
           0.65 ] 
          , 

          [ 745477200000 , 
           0.68 ] 
          , 

          [ 753688800000 , 
           0.71 ] 
          , 

          [ 760600800000 , 
           0.74 ] 
          , 

          [ 770014800000 , 
           0.77 ] 
          , 

          [ 776926800000 , 
           0.8 ] 
          , 

          [ 785138400000 , 
           0.83 ] 
          , 

          [ 792655200000 , 
           0.86 ] 
          , 

          [ 801464400000 , 
           0.89 ] 
          , 

          [ 808549200000 , 
           0.92 ] 
          , 

          [ 816933600000 , 
           0.95 ] 
          , 

          [ 1344488400000 , 
           3.6 ] 
          , 

          [ 1352268000000 , 
           6.25 ] 
          , 

          [ 1360216800000 , 
           8.9 ] 



       ] 
      } 
     ].map(function(series) { 
        series.values = series.values.map(function(d) { return {x: d[0], y: d[1] } }); 
        return series; 
       }); 
    } 
</script> 

這是我d3.js/NV代碼:

nv.addGraph(function() { 
    var testdata = exampleData(), 
     chart = nv.models.linePlusBarChart() 
      .margin({top: 30, right: 70, bottom: 50, left: 70}) 
      .x(function(d,i) { return i }) 
      .color(d3.scale.category10().range()); 

    chart.xAxis.tickFormat(function(d) { 
     var dx = testdata[0].values[d] && testdata[0].values[d].x || 0; 
     return d3.time.format('%x')(new Date(dx)) 
    }); 

    chart.y1Axis 
     .tickFormat(d3.format(',05f')); 

    chart.y2Axis 
     .tickFormat(function(d) { return '$' + d3.format(',05f')(d) }); 

    chart.bars.forceY([0]); 
    chart.lines.forceY([0]); 

    d3.select('#chart svg') 
     .datum(exampleData()) 
     .transition().duration(500).call(chart); 

    nv.utils.windowResize(chart.update); 

    return chart; 
}); 

我想,如果它不能被一些NDV3函數來完成,我必須計算什麼是分紅之間的平均間隔再檢查,如果在該範圍內有日期,如果沒有,我將增加類似的日期間隔和0股息金額。或者什麼是最好的方法?

+0

在將它們傳遞給NVD3之前是否將x值轉換爲Date對象? –

+0

我以爲nvd3已經將時間戳轉換爲日期格式。不是嗎?我可以在哪裏改變? – Lucas03

+0

我面對同樣的問題與多條形圖,通過添加0值到所有日期解決,你試過嗎? –

回答

0

我忘了在這裏發表答案。我在NVD3庫中找不到可以解決這個問題的任何函數。只需在數據中生成零值的日期。