C3.js,y轴时间

Question

使用 C3.js，我试图生成一个图表，其 x 轴是公里的线性列表，y 轴是相应的时间 - 格式为 MM:SS.

我能够生成的最好结果是下面的结果，这与我正在寻找的相反。这会生成一个图表，其中 x 轴为时间，y 轴为公里。谁能建议我如何将下面的内容转换为生成包含 x 轴 KM 和 y 轴时间的图表。谢谢。

var km_chart = c3.generate({
    "data": {
        "x": "time",
        "y": "kms",
        "columns": [
            ["time", "04:00", "04:00", "04:15", "04:30", "04:15"],
            ["kms", 1, 2, 3, 4, 5]
        ]
    },
    "axis": {
        "x": {
            "type": "category"
        }
    },
    "bindto": "#km_chart"
});

Answer 1

最简单的解决方案是旋转图表：

"axis":{
 <your stuff>
 rotate: true
}

y 轴仅接受值，因此您可以将 x/y-axis 切换为旋转，或者您必须将时间转换为某个值。例如，您可以将 1234 用作 12:34。

C3.js,y轴时间

C3.js, y-axis time

javascript

graph

d3.js

c3.js