nvd3 在 x 轴上重复月份

Question

我正在尝试创建一个折线图来显示一年中的数据，并且我使用 Nvd3 制作了一个简单的图表，但是我在 x 轴上显示月份时遇到困难，我查看了其他帖子但出于某种原因，它只显示 "Jan" 12 次。

这是我的代码

        var chart;
        var data;

        nv.addGraph(function () {
            chart = nv.models.lineChart()
                .options({
                    duration: 300,
                    useInteractiveGuideline: true
                });

            // chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately
            chart.xAxis
                .axisLabel("Month")
                .tickFormat(function(d) { return d3.time.format('%b')(new Date(d)); });

            chart.yAxis
                .axisLabel('Tenants')
                .tickFormat(function (d) {
                    if (d == null) {
                        return 'N/A';
                    }
                    return d3.format(',.2f')(d);
                });

            //DATA
            data = getData();

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

            nv.utils.windowResize(chart.update);

            return chart;
        });


        //GETTING DATA    
        function getData() {
            var finance = [];

            for (var i = 1; i <= 12; i++) {
                finance.push({
                    x: i,
                    y: i
                })
            }
            return [
                {
                    values: finance,
                    key: "Finance",
                    color: "#2ca02c"
                }
            ];
        }

JS Fiddle: https://jsfiddle.net/0q10cyte/

//编辑重复几个月

Answer 1

现在，您的 x 只是一个数字：

finance.push({
    x: i,
    y: i
})

一个可能的解决方案（在许多解决方案中）是在实际日期中将其转换：

finance.push({
    x: new Date().setMonth(i),
    y: i
})

这是更新后的 fiddle：https://jsfiddle.net/2futpb98/

nvd3 在 x 轴上重复月份

nvd3 repeating months on x-axis

javascript

d3.js

nvd3.js