NVD3 Line Plus条形图时间表

时间:2013-05-15 22:10:40

标签: d3.js nvd3.js

我必须为“Line Plus Bar Chart”添加适当的时间线,这意味着日期必须平均分布在x轴上。 例如AAPL股息历史。 enter image description here 由于AAPL在1995年至2012年之间没有付款,因此应该有空白。所以我需要根据第一个和最后一个日期传播x轴。像这样的东西: enter image description here 有没有办法在实际日期显示固定的x轴,忽略数据?

或者我需要在dividend_set中添加0值吗?这是我对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股息金额。或者最好的方法是什么?

1 个答案:

答案 0 :(得分:0)

我忘了在这里发帖回答。我没有在NVD3库中找到任何能解决这个问题的功能。只需在数据中生成零值的日期。