Question

是否可以选择汇总C3图表中的数据？当JSON包含具有相同类别的多个数据元素时，数据将被绘制为图表中的多个点，其中应将其聚合并显示为图表中的单个点。随附的是C3图表和预期的图表格式。 在示例中：＆＃34;名称1＆＃34;在上传时显示单点300，其中作为离子C3，它显示一个点在200，另一个在100显示相同。

使用的代码：

#gallery-container li p {display:none;}

以上代码的输出：

预期产出：

Answer 1

据我所知，没有内置到c3中。您可以使用d3的嵌套运算符来聚合json数据，然后将其传递给c3。

var json = [
            {name: 'name1', upload: 200, download: 200, total: 400},
            {name: 'name1', upload: 100, download: 300, total: 400},
            {name: 'name2', upload: 300, download: 200, total: 500},
            {name: 'name3', upload: 400, download: 100, total: 500},
          ];

    var agg = function (json, nestField) {
        var nested_data = d3.nest()
            .key(function(d) { return d[nestField]; })
            .rollup(function(leaves) { 
                // Work out the fields we're not nesting by
                var keys = d3.merge (leaves.map (function(leaf) { return d3.keys(leaf); }));
                var keySet = d3.set(keys);
                keySet.remove (nestField);
                var dataFields = keySet.values();

                // total these fields up
                // console.log(leaves, dataFields); // just for testing
                var obj = {};
                dataFields.forEach (function (dfield) {
                    obj[dfield] = d3.sum(leaves, function(d) {return d[dfield];});
                });
                return obj; 
            })
            .entries(json);

        // return to original json format
        var final_data = nested_data.map (function(nestd) {
            nestd.values[nestField] = nestd.key;
            return nestd.values;
        });

        return final_data;
    };

    var chart = c3.generate({
        bindto:'#png-container',
        data: {
          json: agg(json, "name"),
          keys: {
            x: 'name', // it's possible to specify 'x' when category axis
            value: ['upload', 'download'],
          },
          groups: [
            ['name']
          ]
        },
        axis: {
          x: {
            type: 'category'
          }
        }
    });

https://jsfiddle.net/8uofn7pL/2/

哎呀，与错误的小提琴相关联

c3js中的数据聚合

1 个答案: