0

我在单击按钮时使用 nvd3 库实现离散条形图，我正在调用 generateBarChart 方法，这里是代码：

generateBarChart = function(data, options) {
    if (!$.isArray(data)) {
        if (!$.isPlainObject(data)) {
            data = $.makeArray(data);
        } else {
            try {
                data = $.parseJSON(data);
            } catch(err) {
                console.error(data, "generateBarChart error", err.message, err.stack);
                data = [];
            }
        }
    }
    var chart1;

    if (!$.isPlainObject(options)) {
        options = {};
    }
    options = $.extend(true, {
        container : "#svgChart",
        title : "",
        titleStyle : {
            x : 500,
            y : 200,
            fontFamily : "sans-serif",
            fontSize : "20px",
            fill : "black"
        }
    }, options);

    nv.addGraph(function() {
        chart1 = nv.models.discreteBarChart().x(function(d) {
            return d.label || ""
        }).y(function(d) {
            return d.value || 0
        });
        var selectedChart = d3.select(options.container).datum(dataserver(data)).transition().duration(500);

        selectedChart = selectedChart.call(chart1);

        //d3.select(options.container).append("text").attr("x", options.titleStyle.x).attr("y", options.titleStyle.y).attr("font-family", options.titleStyle.fontFamily).attr("font-size", options.titleStyle.fontSize).attr("fill", options.titleStyle.fill).text(options.title);
        $(options.container).css({
        }).parent().css("text-align", "center").prepend('<h5 class="text-center" >' + options.title + '</h5>');

        nv.utils.windowResize(function() {
            chart1.update();
        });

        return chart1;
    });

    return chart1;
};

function dataserver(data) {
    for ( i = 0; i < data.length; i++) {//TODO
        var name = data[i].name;
        //TODO
        var itemAmount = data[i].itemAmount;
        //TODO
    }
    return [{
        "color" : "#d62728",
        "values" : [{
            "label" : name,
            "value" : itemAmount
        }]
    }];
}

我指的是以下链接（http://nvd3.org/livecode/#codemirrorNav）来生成discreteBarchart我有点卡在dataserver（）方法中，因为在for循环中我只能得到最后一个值

4

1 回答 1

0

寻找有关discreteBarChart 的其他内容，我来到了这里。

希望你现在已经解决了你的问题，如果没有......你需要做这样的事情：

function dataserver(data) {

    values = [];
    for ( i = 0; i < data.length; i++) {
        var name = data[i].name;
        var itemAmount = data[i].itemAmount;
        values.push({"label": name, "value": itemAmount});
    }
    return [{
        "color" : "#d62728",
        "values" : values
    }];
}

通过这种方式，您正在填充一个值数组（以我现在的所有想象力称为“值”），然后将这些数据返回到图表中。

于 2014-01-28T13:49:04.970 回答