Question

我是d3和nvd3的新手。我正在尝试使用nvd3构建多线图，我有2个问题

1）x轴似乎没有显示小时和分钟的正确值，就像在标准utc格式中有日期的json数据一样。

2）当我把内存和cpu的第一个值设置为非零时，它会缩小到负y轴并且看起来很奇怪。

nv.addGraph(function() {
var chart = nv.models.cumulativeLineChart()
    .x(function(d) {
        console.log(d.time)
        return d.time
    })

.y(function(d) {
    console.log(d.value)
    return d.value
})
    .color(["#FF0000", "#000000"])
    .height(210)
    .width(420)
    .useInteractiveGuideline(false)
    .showControls(false)
    .forceY(0)

;


chart.xAxis
    .tickFormat(function(d) {
        return d3.time.format('%H:%M')(new Date(d))
    });
 chart.yAxis.tickFormat(d3.format(',.1'));
d3.select('nv-indexLine').fill("black");
d3.select('#chart svg')
    .datum(formattedData)
    .call(chart);

nv.utils.windowResize(chart.update);

chart.lines.interactive(false);

return chart;
});

Answer 1

一个更改使你的函数像这样返回x值，它应该返回一个Date对象。

所以不要这样做

.x(function(d) {
    console.log(d.time)
    return d.time
})

这样做是为了返回Date对象

.x(function(d) {
            console.log(d.time)
            return new Date(d.time)
        })

工作代码here

使用nvd3的折线图

1 个答案: