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

【问题标题】：How can I create a xy line chart with c3?如何使用 c3 创建 xy 折线图？
【发布时间】：2017-11-17 11:09:32
【问题描述】：

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

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

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

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

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

【问题讨论】：

标签： javascript d3.js c3.js

【解决方案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/

【讨论】：