c3js中的数据聚合 [英] Data aggregation in c3js

问题描述

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

>

使用的代码：

  var chart = c3.generate（{
 bindto：'＃png-container'，
数据：{
 json：[
 {name：'name1'，上传：200，下载：200，总数：400}，
 {名称：名称1，上传：100，下载：300，总计：400}，
 {名称：名称2，上传：300，下载：200，总计：500}，
 {name：'name3'，上传：400，下载：100，总计：500}，
]，
键：{
x：'name'，//可以指定'x '，当类别轴
值：['upload'，'download']，
}，
组：[
 ['name'] 
] 
}，
轴：{
x ：{{
类型：类别 
} 
} 
}）； 
  

上面代码的输出：

解决方案

据我所知，c3没有内置。您可以使用d3的nest运算符在将json数据传递给c3之前对其进行聚合。

  var json = [
 {name：'name1'，上传：200，下载：200，总计：400}，
 {name：'name1'，上传：100，下载：300，总计：400}，
 {name ： name2，上传：300，下载：200，总计：500}，
 {name： name3，上传：400，下载：100，总计：500}，
]； 
 
 var agg =函数（json，nestField）{
 var nested_data = d3.nest（）
 .key（function（d）{return d [nestField];}） 
 .rollup（function（leaves）{
 //通过
计算出我们不嵌套的字段var keys = d3.merge（leaves.map（function（leaf）{return d3 .keys（leaf）;}））; 
 var keySet = d3.set（keys）; 
 keySet.remove（nestField）; 
 var dataFields = keySet.values（）; 
 
 //这些字段总计
 // console.log（leaves，dataFields）; //仅用于测试
 var obj = {}; 
 dataFields.forEach（函数（dfield）{
 obj [dfield] = d3.sum（leaves，function（d）{return d [dfield];}）; 
}）; 
 return obj; 
}）
 .entries（json）; 
 
 //返回原始json格式
 var final_data = nested_data.map（function（nestd）{
 nested.values [nestField] = nested.key; 
返回nested.values; 
}）； 
 
返回final_data; 
}; 
 
 var chart = c3.generate（{
 bindto：'＃png-container'，
 data：{
 json：agg（json， name） ，
键：{
x：'name'，//当类别轴
值：['upload'，'download']，
}时可以指定'x' ，
组：[
 ['name'] 
] 
}，
轴：{
x：{
类型：'category' 
} 
} 
}）； 
  

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

whoops，链接到那里错误的小提琴

Is there an option to aggregate the data in C3 charts? When the JSON contains multiple data elements with the same category, data is plotted as multiple points in the charts, where as it should be aggregated and shown as a single point in the chart. Attached are the C3 charts and expected chart format. In the example: "name 1" show a single point at 300 as upload, where as ion C3 it show one point at 200 and the other at 100 for the same.

Code Used:

var chart = c3.generate({
            bindto:'#png-container',
            data: {
              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},
              ],
              keys: {
                x: 'name', // it's possible to specify 'x' when category axis
                value: ['upload', 'download'],
              },
              groups: [
                ['name']
              ]
            },
            axis: {
              x: {
                type: 'category'
              }
            }
        });

Output of the above code:

Expected Output:

解决方案

Not built into c3 as far as i'm aware. You can use d3's nest operator to aggregate the json data before passing it to c3 though.

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/

whoops, linked to the wrong fiddle there

这篇关于c3js中的数据聚合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！