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 } } });

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

1 个答案: