javascript - 将数据绘制到 C3 的最佳实践

Question

我已经花了几天时间试图找到一种让 C3.js 满意的方式来格式化数据，并且我尝试了很多东西，比如逐行聚合、内部和外部联接(谢谢感谢你们中一些曾经帮助过的可爱的人)，以及类似的努力。我还没有找到好的方法，这都是一个很大的痛苦。我无法想象没有更简单的方法，我确信我还没有弄清楚。

举个例子。我想要一个折线图，其中每年包含一条线。 x 轴是月份(从 1 到 12)，y 轴是收入。

我有这些数据:

{"YEAR":"2009","MONTH":"1","REVENUE":"7533"},{"YEAR":"2009","MONTH":"1","REVENUE":"8406"},{"YEAR":"2009","MONTH":"1","REVENUE":"799"},{"YEAR":"2009","MONTH":"3","REVENUE":"11099"}

并将其汇总，以便计算每年+每月的收入，将其变成这样:

[{"year":"2009","month":"1","revenue":16739},{"year":"2009","month":"2","revenue":1406},{"year":"2009","month":"3","revenue":11099},{"year":"2009","month":"4","revenue":7055}]

现在我知道我必须将其转换为这种格式，以便 C3 js 能够按照我想要的方式使用它:

    [{"month":"1","revenue2009":16739,"revenue2010":16739},{"month":"2","revenue2010":1406},{"month":"3","revenue2009":11099,"revenue2010":16739},{"month":"4","revenue2011":7055}]

此外，我必须以某种方式围绕 c3 进行欺骗，以便将年份显示为相应行的名称 - 在我看来，这是图表的默认功能。

如此小的转变已经让我头疼，而且花费的时间比我想象的要多。有关如何做的任何帮助吗？另外，这种转换是否必要，或者是否有一种更简单的方法可以将两个首先提到的数据集之一集成到 c3 中而不需要这种转换？您能给我一些关于如何处理这些数据的最佳实践吗？谢谢!

Answer 1

在这种情况下，您有两个选择。

您可以设置由 12 个刻度组成的自定义 x 轴，然后添加数据。

http://jsfiddle.net/fokcat28/

var chart = c3.generate({
    bindto: '#chart',
    data: {
        x: 'x',
        columns: [
            ["x", "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
            ["Revenue 2009", 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
            ["Revenue 2010", 16, 16, 17, 18, 20, 20, 20, 23, 23, 23, 24, 27],
            ["Revenue 2011", 23, 23, 23, 23, 24, 24, 24, 24, 24, 24, 24, 20]
        ]
    },
    axis: {
        x: {
            type: 'category' // this needed to load string x value
        }
    }
});

诀窍在于 type:'category' 设置，它允许您使用字符串来命名每个刻度。

您还可以在 x 轴中放置年份(例如 2013 年)，然后为其每个月份添加日期:

https://jsfiddle.net/dbpngfuf/1/

 var chart = c3.generate({
        data: {
            x: 'x',
            columns: [
                ['x', '2013-01-01', '2013-02-01', '2013-03-01', '2013-04-01', '2013-05-01', '2013-06-01', '2013-07-01', '2013-08-01', '2013-09-01', '2013-10-01', '2013-11-01', '2013-12-01'],
                ['Revenue 2008', 30, 200, 100, 400, 150, 250],
                ['Revenue 2010', 130, 340, 200, 500, 250, 350]
            ]
        },
        axis: {
            x: {
                type: 'timeseries',
                tick: {
                    format: '%Y-%m'
                }
            }
        }
    });