在c3.js图表​​中加载动态JSON数据，标签未填充

Question

以下是我从DB收到的数据。它可以是3或5个数据项。我以前使用多维数组来加载数据。但是当项目数量从5变为4,3,2或1时，不会填充。

因此我想用json动态加载

 Json data={"columns":[["data1",15.8,11.749,50.69,10.167],["labels","Fiserv, Inc.","The Vanguard Group, Inc.","Morgan Stanley Smith Barney","JACKSON NATIONAL LIFE INS CO DEPOSIT"]]}

当我使用注释的多维数组时标签正在工作，而不是在我使用动态JSON数据时。

JS代码

 function setupTopSourcesChart(data) {

if (typeof data === 'undefined' || data === null) {
    console.log("Top Sources Chart not available...");
    return;
}

data = $.parseJSON(data);

var value = [];
$.each(data, function(key, i){
    value.push(data.columns[0]);
});


var labels = data.columns[1];

var chart = c3
        .generate({
            bindto : "#topSources",
            size : {
                height : 180,
                width : 450
            },
            bar : {
                width : 16
            },
            padding : {
                right : 160,
                top : 50
            },
            color : {
                pattern : [ '#008000', '#008000', '#008000', '#008000',
                        '#008000' ]
            },
            data : {
                /*columns : [ [ 'Throughput', data.columns[0][1],
                        data.columns[0][2], data.columns[0][3],
                        data.columns[0][4]] ]*/
                json: value,
                type : 'bar',
                labels : {
                    format : { //This doesnt work. helps to show the label in decimals
                        Throughput : d3.format("$,.1f"),

                    }
                },


                color : function(inColor, data) {
                    var colors = [ '#008000', '#008000', '#008000',
                            '#008000', '#008000' ];
                    if (data.index !== undefined) {
                        return colors[data.index];
                    }

                    return inColor;
                }
            },
            axis : {
                rotated : true,
                x : {
                    type : 'category',
                    show : false,
                },
                y : {
                    show : false,
                    padding : {
                        top : 80
                    }
                }
            },
            tooltip : {
                show : false,
                format : {
                    title : function(x) {
                        return x + 1;
                    },
                    value : function(value, ratio, id) {
                        var format = id === 'data1' ? d3.format(',') : d3
                                .format('$');
                        return format(value);
                    }
                },
                grouped : false
            },
            legend : {
                show : false
            }
        });

}

Answer 1

如果使用这个简单的c3功能怎么办？ data url

您需要的是：

• 提供一个返回json的url（或简称为json文件路径
• 您的代码应如下所示

c3.generate({
        ...
        data: {
            ...
            url: 'my_url_which_return_json',
            mimeType: 'json',
            labels : {
               format: function (v, id, i, j) { return d3.format(".1f")(v) }
               }
            },
        },
        ...
    });