Question

我正在尝试将日期解析为nvd3图表。我不确定我做错了什么。我试着看一些例子和其他代码但是没有运气。我要么得到1970年1月1日的日期，要么得到真正的小酒吧，这不是我的意思。

任何帮助都会非常感激。

要回答这个问题，请提供一些我可以使用的代码，而不是链接到互联网上的某个地方。

代码

<div style="position:absolute; top: 0; left: 0;">
    <button onclick="chart.focusEnable(!chart1.focusEnable()); chart1.update();">toggle focus</button>
    <span style="color: #C60;">&lt;-- turn focus on or off!</span>
</div>

<div style="height: 600px;">
<div id="chart1" class='with-3d-shadow with-transitions'>
</div>

    </div>

<script>
    var parseDate = d3.time.format("%Y-m%-%d").parse;

    var testdata = [
        {
            "key" : "Amount" ,
            "bar": true,
            "values" : [ 

                [ 2015-08-10 , 100] ,

                [ 2015-08-11 , 33] ,

                [ 2015-08-12 , 332] ,

                [ 2015-08-13 , 2323] ,

                [ 2015-08-14 , 232] ,

                [ 2015-08-15 , 100] ,

                [ 2015-08-16 , 3553] ,

                [ 2015-08-17 , 2000] ,

                [ 2015-08-18 , 4000] ,

                [ 2015-08-19 , 5500] ,

                [ 2015-08-20 , 700] ,

                [ 2015-08-27 , 150] ,

                [ 2015-08-29 , 7777] ,

                [ 2015-08-30 , 1100] ,

                [ 2015-08-31 , 1000] ,

            ]
        },
        // {
        //     "key" : "Price" ,

        //     "values" : [ 
        //     
        //         [ 1439198810 , 100] ,
        //     
        //         [ 1439285210 , 33] ,
        //     
        //         [ 1439371610 , 332] ,
        //     
        //         [ 1439458010 , 2323] ,
        //     
        //         [ 1439580410 , 232] ,
        //     
        //         [ 1439666810 , 100] ,
        //     
        //         [ 1439753210 , 220] ,
        //     
        //         [ 1439839610 , 2000] ,
        //     
        //         [ 1439926010 , 4000] ,
        //     
        //         [ 1440012410 , 5500] ,
        //     
        //         [ 1440098810 , 500] ,
        //     
        //         [ 1440098810 , 200] ,
        //     
        //         [ 1440671400 , 150] ,
        //     
        //         [ 1439749620 , 3333] ,
        //     
        //         [ 1440852480 , 7777] ,
        //     
        //         [ 1440939000 , 500] ,
        //     
        //         [ 1440939540 , 600] ,
        //     
        //         [ 1441036440 , 500] ,
        //     
        //         [ 1441036440 , 500] ,
        //     
        //     ]
        // }
    ].map(function(series) {
            series.values = series.values.map(function(d) { return {x: d[0], y: d[1] } });
            return series;
        });



    var chart;
    nv.addGraph(function() {
        chart = nv.models.linePlusBarChart()
            .margin({top: 50, right: 60, bottom: 30, left: 70})
            .legendRightAxisHint(' [Using Right Axis]')
            .color(d3.scale.category10().range())


        chart.xAxis.tickFormat(function(d) {
                return format.parseDate('%Y-m%-%d')(new Date(d))
            })
            .showMaxMin(false);

        chart.y1Axis.tickFormat(function(d) { return '$' + d3.format(',f')(d) });
        chart.bars.forceY([0]).padData(false);

        chart.x2Axis.tickFormat(function(d) {
            return format.parseDate('%Y-m%-%d')(new Date(d))
        }).showMaxMin(false);

        d3.select('#chart1').append("svg")
            .datum(testdata)   
            .call(chart)     
            .attr("width", '100%')
            .attr("height", '100%')
            .attr('viewBox','0 0 '+Math.min(width,height)+' '+Math.min(width,height))
            .attr('preserveAspectRatio','xMinYMin')
            .append("g")
            .transition()
            .duration(500);
;

        nv.utils.windowResize(chart.update);

        chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });

        return chart;
    });

</script>

解析正常日期D3.js

0 个答案: