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

Best practices for plotting data to C3

本文关键字：最佳 C3 数据 绘制      更新时间：2023-09-26

我已经花了好几天的时间试图找到以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中？你能给我一些关于如何处理这些数据的最佳实践吗？谢谢

在这种情况下有两个选项。

您可以设置一个由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
        }
    }
});

诀窍在于类型："类别"设置，它允许您使用字符串来命名每个刻度。

您也可以在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'
                }
            }
        }
    });
相关文章：