使用数组时发出的C3.js图表
使用数组时发出的C3.js图表
提问于 2018-02-13 15:33:33
我试图使用c3.js构建一个堆叠的条形图，如果我使用静态数据，我将得到我想要的结果。
然而，我遇到的问题是，当我尝试使用一组动态数据时，我没有得到任何结果。
两个小提琴显示一个有效，另一个确实有效。
var chart = c3.generate({
bindto: '#chart1',
data: {
x: 'x',
columns: [
['x','Jun','Jul','Aug','Sept','Oct',],
['Complete', 7,5,11,8,5],
['Incomplete', 5,11,11,6,5 ]
],
type: 'bar',
groups: [
['Complete', 'Incomplete']
]
},
axis: {
x: {
type: 'category'
}
},
grid: {
y: {
lines: [{value:0}]
}
}
});https://jsfiddle.net/SimonPrice/hdzjefyy/8/ --静态数据
var months = new Array();
months.push('x');
months.push('June');
months.push('July');
months.push('August');
months.push('September');
months.push('October');
var complete = new Array();
complete.push('Complete');
complete.push(5);
complete.push(11);
complete.push(11);
complete.push(6);
complete.push(6);
var incomplete = new Array();
incomplete.push('Incomplete');
incomplete.push(7);
incomplete.push(5);
incomplete.push(11);
incomplete.push(8);
incomplete.push(5);
console.log(months);
console.log(complete);
console.log(incomplete);
var chart = c3.generate({
bindto: '#chart1',
data: {
x: 'x',
columns: [
[months],
[complete],
[incomplete]
],
type: 'bar',
groups: [
['Complete', 'Incomplete']
]
},
axis: {
x: {
type: 'category'
}
},
grid: {
y: {
lines: [{value:0}]
}
}
});https://jsfiddle.net/SimonPrice/hdzjefyy/7/ --来自数组的数据
我不确定\不清楚为什么这会有所不同，为什么这个不起作用。任何和所有的帮助都将不胜感激。
谢谢
西蒙
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-02-13 17:42:35
您不必将months、complete和incomplete添加到columns中的数组中。它已经是一个数组了。删除，它和代码将工作。
var months = new Array();
months.push('x');
months.push('June');
months.push('July');
months.push('August');
months.push('September');
months.push('October');
var complete = new Array();
complete.push('Complete');
complete.push(5);
complete.push(11);
complete.push(11);
complete.push(6);
complete.push(6);
var incomplete = new Array();
incomplete.push('Incomplete');
incomplete.push(7);
incomplete.push(5);
incomplete.push(11);
incomplete.push(8);
incomplete.push(5);
var chart = c3.generate({
bindto: '#chart1',
data: {
x: 'x',
columns: [
months,
complete,
incomplete
],
type: 'bar',
groups: [
['Complete', 'Incomplete']
]
},
axis: {
x: {
type: 'category'
}
},
grid: {
y: {
lines: [{
value: 0
}]
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.css" rel="stylesheet" />
<script src="https://d3js.org/d3.v3.min.js"></script>
<div id="chart1"></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48770319
复制相关文章
相似问题
腾讯云开发者
