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 を生成します

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 に答える