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

Question

我有两个数组。一个是名称 (nameArray)，另一个是计数 (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
      }
    }
});