Question

我需要你的帮助，

我无法在x轴线上显示月份在X轴我希望显示几个月（['Jan'，'Fev'，'Mars'，'Avr'，'Mai'，'Juin'，'Juil'，'Aout'，'Sept'，'Oct） '，'Nov'，'Dec']）但显示0到12。

这是我的代码：

nv.addGraph(function() {
        var chart = nv.models.lineChart();

        chart.xAxis
                .axisLabel('Mois')
                .tickFormat(d3.format(',`enter code here`r'));

        chart.yAxis
                .axisLabel('Pourcentage')
                ;
        chart.forceY([0, 100]);
        d3.select('#chart svg')
                .datum(getPercent())
                .transition().duration(500)
                .call(chart);

        nv.utils.windowResize(function() {
            d3.select('#chart svg').call(chart)
        });

        return chart;
    });

function getPercent() {
        var habitation = [],
                voiture = [],
                seminaire = [],
                months = [Jan','Fev','Mars','Avr','Mai','Juin','Juil','Aout','Sept','Oct','Nov','Dec'];
        $.each(months,function(i,element){
            habitation.push({x: i, y: Math.ceil((54 / 12) * i)});
            voiture.push({x: i, y: Math.ceil((18 / 12) * i)});
            seminaire.push({x: i, y: Math.ceil((10 / 12) * i)});
        });

        return [
            {
                values: habitation,
                key: 'Echéance habitation payée',
                color: '#2E3FD3'
            },
            {
                values: voiture,
                key: 'Echéance voiture payée',
                color: '#3CD32E'
            },
            {
                values: seminaire,
                key: 'Séminaire remboursé',
                color: '#C40B18'
            }
        ];
    }

Answer 1

试试这段代码：

chart.xAxis.tickFormat(function (d) {
    // %b - abbreviated month name.
    return d3.time.format('%b')(new Date(d))
});

如果您需要有关远程日期/时间的更多信息，请阅读here

显示您可以使用的所有月份：chart.xAxis.tickValues(['Jan','Fev','Mars','Avr','Mai','Juin','Juil','Aout','Sept','Oct','Nov','Dec'])

轴here

上的更多阅读信息

<小时/> 的 UPDATE

通过查看您的code，我认为问题出在您的数据上。你似乎没有通过日期。如果您在index中打印tickFormat，您将获得一组0-12的随机数，因此它不适用于d3日期函数。

我对您的代码here进行了一些更改。要使日期正常工作，请确保发送日期，目前我使用的是unix时间戳。

希望有所帮助

nvd3 forceX显示月份

1 个答案: