1
我必須在「Line Plus條形圖」中添加適當的時間線,這意味着日期必須平均分佈在x軸上。 例如AAPL股息歷史。 由於AAPL在1995年至2012年間沒有付款,應該有空白。所以我需要根據第一個和最後一個日期傳播x軸。這樣的事情:
有沒有辦法顯示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股息金額。或者什麼是最好的方法?
在將它們傳遞給NVD3之前是否將x值轉換爲Date對象? –
我以爲nvd3已經將時間戳轉換爲日期格式。不是嗎?我可以在哪裏改變? – Lucas03
我面對同樣的問題與多條形圖,通過添加0值到所有日期解決,你試過嗎? –