过滤json数据并使用过滤数据绘制nvd3图表

时间:2016-09-15 12:01:00

标签: javascript json d3.js charts nvd3.js

d3.json('http://www.mocky.io/v2/57d14d2f100000cd19208e19', function (error, historicalBarChart) {

(function () {


    nv.addGraph(function() {
    var chart = nv.models.discreteBarChart()
        .x(function(d) { return d.label })
        .y(function(d) { return d.value })
        .staggerLabels(true)
        //.staggerLabels(historicalBarChart[0].values.length > 8)
        .showValues(true)
        .duration(250)
        .height(300)
        .width(400)
        ;


        var filtered1=historicalBarChart[0].values.filter(function(d) { return d.value > 15;});

    console.log(filtered1); // getting filtered json here

    d3.select('#chart2 svg')
        .datum(filtered1) // doesn't render chart for filtered json
        .transition().duration(500)
        .call(chart);
    nv.utils.windowResize(chart.update);
    return chart;

    });
})();
});

我正在尝试在api数据中过滤大于15的值的数据并绘制图表。但是数据未被过滤,并且由于数据不可用而未呈现图表。如何过滤数据并显示nvd3图表?在此先感谢!!

2 个答案:

答案 0 :(得分:1)

您的测试集(http://www.mocky.io/v2/57d14d2f100000cd19208e19)不包含labelvalue个键的对象。 它包含一个只有一个对象的数组,其中包含一个value键。

所以你应该使用: var filtered1 = historicalBarChart[0].values.filter(..)而非historicalBarChart.filter(...)

答案 1 :(得分:0)

在尝试了很多这个解决方案之后,将过滤后的数据放入nvd3所需的json格式就可以了。这样做的代码就在下面..

var filtered = [{key:"累积回报",值:过滤1}]