2

我有一个 api 给我返回多个数组，我必须放在 c3 折线图上。我似乎能够很好地绘制，但如果我开始传递倍数，它就会开始适应。我已经进行了一些搜索，但从我所看到的情况来看，我需要比在数据中调用特定变量名称更加动态，因为我不知道在任何给定时间我会有多少。

我的代码看起来像这样

array1 = [];
array2 = [];
array 3 = [];
Data = ?;
 c3.generate({
 bindto: '.timeline',
                    data:{
                        columns: [
                            Data,
                        ],
                        axes: {
                            data2: 'x' // ADD
                        }
                    },
                    axis: {
                        y: {
                            label: { // ADD
                                text: 'Waiting',
                                position: 'outer-middle'
                            }
                        },
                        x: {
                            type: 'category',
                            categories: hour,
                            show: true, // ADD
                            label: { // ADD
                                text: '',
                                position: 'outer-center'
                            }   
                        }
                    }
                });

我见过做这样的事情

columns: [
          Data1,
          Data2,
          Data3
],

有什么办法可以将这些数组放入一个变量中以传递给 c3 图表？我试过制作一个数组并将其传递进去。我也试过把它们放入一个对象中，但这也把它搞砸了。任何帮助，将不胜感激！

4

1 回答 1

2

应该很直接的把三个数组变成一个数组数组，也就是columns数组。

var array1 = ['data1', 30, 200, 100, 400, 150, 250];
var array2 = ['data2', 50, 20, 10, 40, 15, 25];
var array3 = ['data3', 230, 190, 300, 500, 300, 400];
var Data = [array1, array2, array3];

c3.generate({
  bindto: '.timeline',
  data: {
    columns: Data
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div class='timeline' />

于 2015-06-04T14:57:11.403 回答