[英]Loading Dynamic JSON data in c3.js chart, labels not populating
Below is the data I receive from DB. 以下是我从数据库收到的数据。 It could be 3 or 5 data items. 它可能是3或5个数据项。 I was previously using multi-dimensional array to load data. 我以前使用多维数组加载数据。 But when the number of items changes from 5 to 4,3,2 or 1 the bars would not populate. 但是,当项目数从5变为4,3,2或1时,条形图将不会填充。
Hence why I want to use json to load dynamically 因此,为什么我要使用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"]]}
The labels are working when I use the commented multi-dimensional array, not when I use dynamic JSON data. 当我使用带注释的多维数组时,标签起作用,而不是在使用动态JSON数据时,标签起作用。
JS Code 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
}
});
} }
What if using this simple c3 feature > data url 如果使用此简单的c3功能> 数据网址怎么办
What you need is: 您需要的是:
c3.generate({ ... data: { ... url: 'my_url_which_return_json', mimeType: 'json', labels : { format: function (v, id, i, j) { return d3.format(".1f")(v) } } }, }, ... });
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.