使用数组时C3.js图表​​问题

Question

我正在尝试使用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/ - 数组中的数据

我不确定\不清楚为什么会有所不同以及为什么这不起作用。任何和所有的帮助将不胜感激。

由于

西蒙

Answer 1

您不必在months内的数组中添加complete，incomplete和columns。它已经是一个数组。删除，它和代码将工作。

＆＃13;

＆＃13;

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
      }]
    }
  }
});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;