具有 3 个变量的 C3 条形图答案

【问题标题】：C3 bar chart with 3 variables具有 3 个变量的 C3 条形图
【发布时间】：2016-02-16 00:01:05
【问题描述】：

我正在尝试显示类似one 的图表，其中包含以下数据：

[{"name":"doctor","monetary":"on","number":57},{"name":"programmer","monetary":"non-monetary","number":15}]

但我无法将货币或价值与其余数据分组。有没有其他方法可以显示这些数据的图表？

这是控制器中的定义：

$scope.chart = c3.generate({
          bindto: d3.select('#chart'),
          data: {
            json: $scope.data,
            columns: [
                ['monetary'], 
                ['number']
            ],
            keys: {
                value: ['doctor', 'programmer']
            },
            groups: [
                ['number'],['monetary']
             ],
            type: 'bar'
            },

          bar: {
            width: {
                ratio: 0.5 
              }
          },
        });
      },

    function formatData ( json ) {
      var formattedData = [],
          object        = {};

      // fill object with data
      angular.forEach(json, function(row) {
        if (row.hasOwnProperty('name') && row.hasOwnProperty('number')) {
          this[row.name] = row.number;
        }
      },object);

      formattedData.push(object); // push c3 object in the array

      return formattedData;
    }
}]);

【问题讨论】：

你的意思是我不能按价值或价值分组货币？

标签： angularjs json d3.js c3.js

【解决方案1】：

如果我没记错，把这部分代码去掉，然后单独显示

  groups: 
[ ['number'],['monetary']],

修改后的代码如下，并给出了小提琴链接。

var chart = c3.generate({
    data: {
        columns: [
            ['MONETARY', 0, 3259, 10415, 14660, 2950, 16705, 22255, 4000],
            ['NON-MONETARY', 12335, 18041, 35900, 21985, 15110, 370, 13055, 20740]
        ],
        type: 'bar',

    },
    axis: {
        x: {
            type: 'category',
            categories: ['DENTIST', 'PROGRAMMER/ANALYST', 'CORPORATE SECRETARY', 'PHYSICIAN', 'PROFESSOR', 'PRESIDENT', 'MANAGER', 'CO-OWNER']
        }
    }    
});

查看修改后的小提琴： http://jsfiddle.net/63cp42Lv/4/

【讨论】：