格式化Google图表的数据 [英] Formatting data for Google Charts

问题描述

我正在尝试取得一些成就，以便为Google图表正确格式化我的数据。目前，我具有以下格式的数据

I am trying to achieve something in order to get my data formatted correctly for Google Charts. At the moment, I have data in the following format

Array(4)
    0: {Category: "cat2", Count: 11}
    1: {Category: "cat4", Count: 24}
    2: {Category: "cat3", Count: 52}
    3: {Category: "cat1", Count: 57}

Google要求第一行为标签，其他行为内容。因此，就我而言，Google要求我的数据是这样的

Google requires the first row to be the Labels, and the other rows the content. So in my case Google requires my data to be like so

let data = google.visualization.arrayToDataTable([
   ['Category', 'Count'],
   ['cat1',  11],
   ['cat2',  24],
   ['cat3',  52],
   ['cat4',  57]
]);

为此，我正在执行以下操作

In order to do this, I am doing the following

generateData (data) {
    return [Object.keys(data[0])].
    concat(
        data.map(
            data => Object.values(data)
        )
    );
}

所以这一切都很好，但是，我正在尝试另外两件事达到。首先，我要确保数据按特定顺序排列。

So this all works fine, however, there are two additional things I am trying to achieve. Firstly, I want to make sure the data is in a particular order.

这就是我的想法，我不需要像上面一样动态地收集类别。原因是因为我知道它将始终是4类，即cat1，cat2，cat3和cat4。这样我就可以按我想要的顺序定义类别了。

So this is what I am thinking, I do not need to dynamically collect the categories like I do above. Reason for this is because I know it will always be 4 categories, cat1, cat2, cat3 and cat4. So I could potentially define my categories, in the order I want them.

generateData (data) {
    let myArray = [];
    const header = ["Category", "Count"];
    const categories = ["cat1", "cat2", "cat3", "cat4"];
    myArray.push(header);
}

然后如何从数据数组中添加其他行，确保

But then how do I add the additional rows from the data array, making sure it matches up with the correct category?

我想做的第二件事是给每个类别栏赋予自己的颜色。根据Google文档，在标题行中，我可以添加样式

The second thing I wan to do is give each categories bar its own color. According to the Google docs, within the header row, I can add a style

let myArray = [];
const header = ["Category", "Count", { role: 'style' }];
const categories = ["cat1", "cat2", "cat3", "cat4"];
const colors = ["red", "blue", "silver", "yellow"];
myArray.push(header);

但是对于其他行，从我的数据数组中，我需要添加适当的颜色每个类别。因此，我需要的最终数组应该是这样的

But then for the additional rows, from my data array, I would need to add the appropiate color for each category. So the final array I am after should look something like this

[
  ["category", "Count", { role: 'style' }],
  ["cat1", "11", "red"],
  ["cat2", "24", "blue"],
  ["cat3", "52", "silver"],
  ["cat4", "57", "yellow"]
];

如何通过传递的初始数据来实现这一目标？

How can I achieve this with the initial data that is being passed?

谢谢

推荐答案

您可以使用 forEach 在任何一个数组上创建一个数组，然后使用三个值和相应的值创建一个数组。

You can use forEach on any of the the arrays and then create an array with three values with corresponding values.

let myArray = [];
const header = ["Category", "Count", { role: 'style' }];
const data = [
   {"Category":"cat3","Count":59},
   {"Category":"cat1","Count":109},
   {"Category":"cat2","Count":120},
   {"Category":"cat4","Count":57}
]
const obj = data.reduce((ac,{Category, Count}) => (ac[Category] = Count,ac),{});
const categories = ["cat1", "cat2", "cat3", "cat4"];
const count = [57, 11, 52, 24];
const colors = ["red", "blue", "silver", "yellow"];
myArray.push(header);
categories.forEach((x,i) => {
  myArray.push([x,obj[x],colors[i]]);
})
console.log(myArray)

这篇关于格式化Google图表的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！