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

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

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>

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

C3.js chart issue when using an array

javascript

jquery

c3.js