通过Chartjs条形图的键对对象进行分组 [英] Grouping the object by key for Chartjs bar chart

问题描述

我正在尝试使用Chart.js创建条形图。我在尝试根据每个用户的状态创建分组条形图时遇到了麻烦。因此，数据如下：

I'm trying to create bar chart using Chart.js. I got stuck trying to create grouped bar chart based on the status per user. So here's the data:

[{statusId: 0, firstName: "Joe", status: "appealed", count: 1},
{statusId: 0, firstName: "Jane", status: "approved", count: 100},
{statusId: 0, firstName: "Smith", status: "approved", count: 63},
{statusId: 0, firstName: "Mike", status: "approved", count: 63},
{statusId: 0, firstName: "Ken", status: "approved", count: 35},
{statusId: 0, firstName: "Kim", status: "approved", count: 193},
{statusId: 0, firstName: "Joe", status: "approved", count: 1},
{statusId: 0, firstName: "Jane", status: "closed", count: 1},
{statusId: 0, firstName: "Joe", status: "concluded", count: 1},
{statusId: 0, firstName: "Jane", status: "denied", count: 6},
{statusId: 0, firstName: "Smith", status: "denied", count: 9},
{statusId: 0, firstName: "Mike", status: "denied", count: 1},
{statusId: 0, firstName: "Mark", status: "denied", count: 8},
{statusId: 0, firstName: "Ken", status: "denied", count: 2},
{statusId: 0, firstName: "Kim", status: "denied", count: 20},
{statusId: 0, firstName: "Joe", status: "denied", count: 2},
{statusId: 0, firstName: "Joe", status: "transferred", count: 1}]

根据此数据，我需要在x轴上为用户创建一个图表，其中包含用户的每种状态的计数。在Chartjs中，可以通过具有如下所示的数据集数组轻松完成此操作：

From this data, I need to create a chart for users in x-axis with count of each status for the user. It can be easily done in Chartjs by having array of datasets like the following:

datasets:[{
      data: [//some counts for a group],
     },
     {
       data: [// counts for another group],
     }
    // and so on
}]

问题是我需要根据状态对这些数据进行分组。因此，我能想到的一种解决方案是：

The problem is I'll need to group these data based on the status. So, one solution I can think of is:

angular.forEeach(data, function(val)){ 
   switch(val.status){
       case 'approved':
        // add count to an approved count array
        break;
       case 'appealed':
       // add count to appealed count array
       break;
   }

}

但我认为存在问题这个。如果他们创建另一个状态怎么办？待定。然后，我必须返回并更改代码。无论如何，我是否可以按状态对对象进行分组，并为每个组创建一个计数数据数组，然后在数据集中使用它们？

But I think there're problems with this one. What if they create another status e.g. pending. Then I'll have to go back and change the code. Is there anyway I can group the objects by status and create an array of count data for each group that I can then use in datasets?

我刚刚注册了复数语言的javascript课程，因此学习高级javascript仍然需要一些时间。同时，有人可以向我展示解决这个难题的正确有效的方法吗？

I just signed up for javascript course in pluralsight, so it'll still take me a while to learn advanced javascript. In the meantime, can anyone show me the proper and efficient way to solve this puzzle?

Chart.js要求数据采用以下格式：

Chart.js requires data to be in the following format:

var data = {
    labels: ['Joe', 'Jane', 'Smith', 'Mike', 'Ken', 'Kim', 'Mark'],
    datasets: [
        {
            label: 'Appealed',
            fillColor: '#382765',
            data: [1,0,0,0,0,0,0]
        },
        {
            label: 'Approved',
            fillColor: '#7BC225',
            data: [1, 100, 63, 63, 35, 193,0]
        },
        {
            label: 'Denied',
            fillColor: '#2196F3',
            data: [2, 6, 9, 1, 2, 20, 8]
        },

    ]

}

所以，这里发生的是标签中的每个项目 有一个计数用于状态即标签数据集数组中的 data 数组中的c $ c>。例如：用于被吸引的 标签的数据数组： 1 是吸引的 的个计数 Joe ，其余所有用户的其余均为0。

So, what's happening here is for each item in labels there's a count for the status i.e. label in data array inside datasets array. For e.g.: data array for Appealed label: 1 is the count of appealed for Joe and rest is 0 for all other users.

推荐答案

您可以将哈希表用作对具有相同状态和另一个哈希表，用于名称索引。然后构建标签数组和数据集。

You could use a hash table as reference to the array with the same status and another hash table for indices of the names. then build the labels array and datasets.

var raw = [{ statusId: 0, firstName: "Joe", status: "appealed", count: 1 }, { statusId: 0, firstName: "Jane", status: "approved", count: 100 }, { statusId: 0, firstName: "Smith", status: "approved", count: 63 }, { statusId: 0, firstName: "Mike", status: "approved", count: 63 }, { statusId: 0, firstName: "Ken", status: "approved", count: 35 }, { statusId: 0, firstName: "Kim", status: "approved", count: 193 }, { statusId: 0, firstName: "JoeJoe", status: "approved", count: 1 }, { statusId: 0, firstName: "Jane", status: "closed", count: 1 }, { statusId: 0, firstName: "Joe", status: "concluded", count: 1 }, { statusId: 0, firstName: "Jane", status: "denied", count: 6 }, { statusId: 0, firstName: "Smith", status: "denied", count: 9 }, { statusId: 0, firstName: "Mike", status: "denied", count: 1 }, { statusId: 0, firstName: "Mark", status: "denied", count: 8 }, { statusId: 0, firstName: "Ken", status: "denied", count: 2 }, { statusId: 0, firstName: "Kim", status: "denied", count: 20 }, { statusId: 0, firstName: "Joe", status: "denied", count: 2 }, { statusId: 0, firstName: "Joe", status: "transferred", count: 1 }],
    nameIndices = Object.create(null),
    statusHash = Object.create(null),
    data = { labels: [], datasets: [] };

raw.forEach(function (o) {
    if (!(o.firstName in nameIndices)) {
        nameIndices[o.firstName] = data.labels.push(o.firstName) - 1;
        data.datasets.forEach(function (a) { a.data.push(0); });
    }
    if (!statusHash[o.status]) {
        statusHash[o.status] = { label: o.status, fillcolor: 'f00', data: data.labels.map(function () { return 0; }) };
        data.datasets.push(statusHash[o.status]);
    }
    statusHash[o.status].data[nameIndices[o.firstName]] = o.count;
});

console.log(data);

.as-console-wrapper { max-height: 100% !important; top: 0; }

这篇关于通过Chartjs条形图的键对对象进行分组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！