Javascript x轴上有时间的nvd3图表问题

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

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）找到了很多解决方案，尝试了

Date

函数和一些格式化程序，但似乎无法找出导致日期从错误日期开始的原因

有人知道这是什么原因吗

---

谢谢

您需要将日期字符串解析为

date

对象：

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

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

---

正如我所说，我也尝试在其中添加一个Date（）函数，但没有任何帮助。与您的建议相同，但仍然相同。您是否验证了日期被正确解析？我已尝试手动将我的日期字符串放入您提供的解析器，并且日期似乎正确解析。耶，这很有帮助。谢谢现在，不幸的是，另一个问题。数据看起来是“混乱”的，就像我猜测点的顺序必须是从最低的x值到最高的，但是由于我的数据输出在Python的字典中，所以它是无序的。有什么办法可以避免吗？太棒了！谢谢你的帮助！