繁体   English   中英

nvd3折线图问题

[英]nvd3 line chart issue

nvd3折线图与CSS问题

在这里,我使用了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;
    });
};

redraw(data)-从服务获取的数据,在x轴为dateTimeStamp,在y轴点为整数。

请帮忙!

  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.我正在尝试删除折线图上方看到的填充,但是我所做的样式更改未成功

由于我没有您的数据集,因此我不确定如何解决,所以我无法重现该问题

这是我的测试代码

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM