使用数组在 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
      }
    }
});

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

Plotting graph in C3.js using array

javascript

c3.js