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小提琴：https://jsfiddle.net/0q10cyte/

// EDIT 重复几个月

Answer 1

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

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

一个可能的解决方案（众多）正在将其转变为实际日期：

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

这是更新的小提琴：https://jsfiddle.net/2futpb98/

nvd3在x轴上重复数月

1 个答案: