「Line Plus Bar Chart」に適切なタイムラインを追加する必要があります。つまり、日付を x 軸に均等に配置する必要があります。たとえば、AAPL の配当履歴。
AAPL は 1995 年から 2012 年の間に支払いを行わなかったので、空白のスペースがあるはずです。したがって、最初と最後の日付に従って x 軸を広げる必要があります。このようなもの:
データを無視して、実際の日付に固定された x 軸を表示する方法はありますか?
それとも、0 の値を自分のdivid_set に追加する必要がありますか? これは、dividual_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で追加します。または、最善の方法は何ですか？