Question

我需要在图表中绘制销售数据图表，并选择了nvd3.js来做到这一点。以下是我的图表的代码片段： var chart;

nv.addGraph(function () {
    chart = nv.models.lineChart()
        .options({
        margin: {
            left: 100,
            bottom: 100
        },
        x: function (d, i) {
            return i
        },
        showXAxis: true,
        showYAxis: true,
        transitionDuration: 250
    });

    chart.xAxis.axisLabel("Date")
        .tickFormat(function (d) {
        return d3.time.format('%B %d, %Y')(new Date(d));
    });

    chart.yAxis.axisLabel("Dollars $")
        .tickFormat(d3.format(',.2f'));

    d3.select('#chart1 svg')
        .datum(salesdata())
        .call(chart);



    //TODO: Figure out a good way to do this automatically
    nv.utils.windowResize(chart.update);
    //nv.utils.windowResize(function() { d3.select('#chart1 svg').call(chart) });

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

    return chart;
});


function salesdata() {
    var pin = [],
        product = [],
        service = [],
        fee = [],
        repair = [],
        total = [],
        sales = {
            "February 20, 2014": {
                "repairs": 0,
                "services": 0,
                "products": 0,
                "fees": 160.00,
                "pins": 0,
                "total": 160.00
            },
            "January 22, 2014": {
                "repairs": 0,
                "services": 0,
                "products": 0,
                "fees": 0,
                "pins": 12.00,
                "total": 12.00
            },
            "January 07, 2014": {
                "repairs": 0,
                "services": 0,
                "products": 0,
                "fees": 0,
                "pins": 2496.95,
                "total": 2496.95
            },
            "January 08, 2014": {
                "repairs": 0,
                "services": 0,
                "products": 0,
                "fees": 0,
                "pins": 3124.95,
                "total": 3124.95
            },
            "January 11, 2014": {
                "repairs": 0,
                "services": 0,
                "products": 0,
                "fees": 0,
                "pins": 961.10,
                "total": 961.10
            },
            "January 09, 2014": {
                "repairs": 0,
                "services": 0,
                "products": 0,
                "fees": 0,
                "pins": 2094.50,
                "total": 2094.50
            },
            "February 18, 2014": {
                "repairs": 410.00,
                "services": 360.00,
                "products": 0,
                "fees": 270.00,
                "pins": 69.95,
                "total": 1109.95
            },
            "January 13, 2014": {
                "repairs": 0,
                "services": 0,
                "products": 0,
                "fees": 0,
                "pins": 1229.05,
                "total": 1229.05
            },
            "January 10, 2014": {
                "repairs": 0,
                "services": 0,
                "products": 0,
                "fees": 0,
                "pins": 3544.45,
                "total": 3544.45
            },
            "January 06, 2014": {
                "repairs": 0,
                "services": 0,
                "products": 0,
                "fees": 0,
                "pins": 3825.55,
                "total": 3825.55
            }
        };

    for (i in sales) {
        pin.push({
            x: i,
            y: sales[i].pins
        });
        product.push({
            x: i,
            y: sales[i].products
        });
        service.push({
            x: i,
            y: sales[i].services
        });
        fee.push({
            x: i,
            y: sales[i].fees
        });
        total.push({
            x: i,
            y: sales[i].total
        });
        repair.push({
            x: i,
            y: sales[i].repairs
        });
    };

    return [{
        values: total,
        key: "Total",
        color: "#abcdef"
    }, {
        values: pin,
        key: "PINs",
        color: "#ff7f0e"
    }, {
        values: product,
        key: "Products",
        color: "#ccdd33"
    }, {
        values: fee,
        key: "Fees",
        color: "#2222ff"
    }, {
        values: service,
        key: "Services",
        color: "#667711"
    }, {
        values: repair,
        key: "Repairs",
        color: "#eeccff"
    }];
}

我选择在简单的svg元素中制作图表，如下所示：

<div id="chart1" >
    <svg style="height: 500px;"></svg>
</div>

不幸的是，x轴上的日期似乎出现了问题，图表显示like this

我尝试了通过Google搜索找到的众多解决方案（例如this），使用Date函数和一些格式化程序进行了实验，但似乎无法隔离导致日期开始的原因错误的约会。

有谁知道这是什么原因？

由于

Answer 1

您需要将日期字符串解析为Date个对象：

var parser = d3.time.format("%B %d, %Y").parse;

...
    pin.push({
        x: parser(i),
        y: sales[i].pins
    });
...

nvd3图表在x轴上的时间问题

1 个答案: