使用数组在C3.js中绘制图形

Question

我有两个数组。一个是名称（nameArray），另一个是count（countArray）。 数组的值将通过API获取。

var chart = c3.generate({ 
    bindto: '#chart', 
    data: { 
     columns: [ 
     ['data1', 30, 200, 100, 400, 150, 250] 
     ] 
    } 
}); 

以上代码示例可从C3.js网站获得。我需要它有不同的表现。

样品阵列： -

nameArray=["name1","name2","name3"] 
countArray=[20,34,12] 

在这个例子中，我想的名字是沿X轴和计数是沿Y轴。 请帮我实现这一点。由于

Answer 1

C3有一个选项，以接受Row Oriented Data：

var chart = c3.generate({ 
data: { 
    rows: [ 
      ['data1', 'data2', 'data3'], 
      [90, 120, 300], 
      [40, 160, 240], 
      [50, 200, 290], 
      [120, 160, 230], 
      [80, 130, 300], 
      [90, 220, 320], 
     ] 
    } 
}); 

这不正是你想要的吗？ 你只需要合并nameArray和countArray到数组的数组：

var data = []; 
data.push(nameArray); 
//do this for each count array 
data.push(countArray); 

然后做：

var chart = c3.generate({ 
    data: { rows: data } 
}); 

编辑

我想我跟着你了。是this你想要什么？

在这种情况下，您需要Category Axis功能。 要准备数据你必须做到以下几点：

//your arrays 
var nameArray=["name1","name2","name3"] 
var countArray=[20,34,12] 

countArray.unshift('data'); 

var chart = c3.generate({ 
    data: { 
     columns: [countArray] 
    }, 
    axis:{ 
     x:{ 
     type: 'category', 
     categories: nameArray 
     } 
    } 
});