Question

nvd3 line chart with CSS issues

在这里，我使用了nvd3的折线图。我想用这个图表解决一些问题 1.这是一个交互式图表，但即使我将鼠标悬停在数据中没有点的点上，它仍会显示x和y点。 2. x轴和y轴线不显示。交互式指南也没有出现在一个矩形框中。 3.无论我将宽度增加到多少，x轴都会在最后被截断（最后截止时间为14:29:19）。 4.我正在尝试删除我们在折线图上方看到的填充，但是我所做的样式更改没有成功。

我用来获取折线图的代码

var redraw = function(testData) {
    var dataT = [{
        key : 'Character Count',
        values : testData,
        color : '#00AEEF',
        area : false
    }];

    var margin = {
        top : 80,
        right : 20,
        bottom : 80,
        left : 50
    }, width = 1000 - (margin.left + margin.right), height = 600 - (margin.top + margin.bottom), x = d3.time.scale().range([0, width]), y = d3.scale.linear().range([height, 0]);

    x.domain(d3.extent(dataT[0].values, function(d) {
        return d3.time.format('%X')(new Date(d.TimeStamp));
    }));
    y.domain([0, d3.max(dataT[0].values, function(d) {
        return d.CharCount;
    })]);

    nv.addGraph(function() {
        chart = nv.models.lineChart().transitionDuration(350).useInteractiveGuideline(true)
            .showLegend(true).showYAxis(true).showXAxis(true).x(function(d) {
                return new Date(d.TimeStamp);
            }).y(function(d) {
                return d.CharCount;
            });

        chart.xAxis.axisLabel('Time').tickFormat(function(d) {
            return d3.time.format('%X')(new Date(d));
        }).scale(x).orient("bottom");

        chart.yAxis.axisLabel('Character Count').tickFormat(d3.format(',')).scale(y);

        chart.lines.forceY([0]);

        d3.select('#chart2 svg')//.append("g")
        .datum(dataT).attr('height', height).attr('width', width).call(chart);

        nv.utils.windowResize(chart.update);

        return chart;
    });
};

重绘（数据） - 从x轴中的dateTimeStamp和y轴点的整数获取数据。

请帮忙！

Answer 1

这是一个交互式图表，但即使我将鼠标悬停在数据没有分数的点上，它仍会显示x和   Y型分。 2. x轴和y轴线不显示。还有   交互式指南没有出现在一个矩形框中。

在nvd3 zip文件中添加相应的javascript文件应解决问题（line.js，linechart.js和相应的css文件）

3.无论我将宽度增加到多少，x轴都会在最后切断（最后14:29:19被切断）。

这是因为您没有在代码中设置图表的宽度和高度来生成图表你应该做的

chart.width(width).height(height)

4.我正在尝试删除我们在折线图上方看到的填充，但是我所做的样式更改导致没有成功

我不知道怎么解决，因为我没有你的数据集，所以我无法重现问题

Here is my test code

nvd3折线图问题

1 个答案: