Question

在示例页面http://c3js.org/samples/simple_multiple.html上，我看到我可以轻松地创建多行图表，基于列或行。

虽然，我找不到一个简单的案例，我想从xy坐标序列构建折线图，如下所示：

[
    {x:1, y:2},
    {x:2, y:3}
    ...
]

我可以使用NVD3执行此操作。

是否可以为每个点构建一个带有xy坐标的折线图？

Answer 1

是的，只需要告诉c3哪些变量是'x'值（我们知道它是x，但只需告诉c3）

对http://c3js.org/samples/data_json.html示例的略微调整显示了这一点：

var chart = c3.generate({
    data: {
        json: [
            {name: 'www.site1.com', upload: 200, download: 200, total: 400, x: 2},
            {name: 'www.site2.com', upload: 100, download: 300, total: 400, x: 3},
            {name: 'www.site3.com', upload: 300, download: 200, total: 500, x: 4},
            {name: 'www.site4.com', upload: 400, download: 100, total: 500, x: 5},
        ],
        keys: {
            x: 'x',
            value: ['upload', 'download'],
        }
    },
});

上面的JSFiddle版本：http://jsfiddle.net/dj27wwef/

如何使用c3创建xy折线图？

1 个答案: