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以某种方式欺骗，以便将YEAR显示为相应行的名称 - 在我看来，这些功能是图表的默认功能。

这种小小的转变已经让我感到头痛，并且花费的时间比我认为的更多。有关如何做的任何帮助？此外，这种转换是必要的，还是有一种更容易的方法将两个首先提到的数据集中的一个集成到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
        }
    }
});

诀窍在于：＆＃39;类别＆＃39;设置，允许您使用字符串命名每个刻度。

您还可以在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'
                }
            }
        }
    });

绘制数据到C3的最佳做法

1 个答案: