Question

我的数据格式如下：

[
    {
      "id": 1,
      "cost": 323,
      "comparison": "High",
      "flag": "Alert"
    }
    ...
]

我正在尝试为 Google图表准备此数据，更具体地说是制作直方图。所需的格式类似于下一个示例：

var data = google.visualization.arrayToDataTable([
    ['Name', 'Number'],
    ['Name 1', number1],
    ['Name 2', number2],
    ['Name 3', number3],
    ...
]);

因此，从我的输入数据中，我想使用id和cost属性。为了解决这个问题，我实现了下一个代码：

const keys = Object.keys(this.data[0]).filter(e => !(["comparison","flag"].includes(e)));
const values = this.data.map(e => Object.entries(e).filter(([k]) => keys.includes(k)).map(([, v]) => v));
const formattedArray = [keys, ...values];

这在某种程度上给了我所需的数据，我看到的是这样的：

var data = google.visualization.arrayToDataTable([
    ['id', 'cost'],
    [1, 323]
    ...
]);

但是我的图表无法正确显示，我想面对的问题是我将id's传递为int，因此 Google图表期望第一列成为string。

如何转换放置在第一列中的所有值，所以它们是字符串？

谢谢！

Answer 1

您可以使用Number.isInteger()来检查变量是否为数字，然后使用toString()方法对其进行转换。您可以使用地图中的index参数仅对第一列进行字符串化。您可以这样更改代码：

const data = [{ "id": 1, "cost": 323, "comparison": "High", "flag": "Alert"}]

const keys = Object.keys(data[0]).filter(e => !(["comparison","flag"].includes(e)));
const values = data.map(e => Object.entries(e).filter(([k]) => keys.includes(k)).map(([, v], i ) => {
  if ( i === 0 && Number.isInteger( v ) ) {
    return v.toString();
  }
  return v;
}));
const formattedArray = [keys, ...values];

console.log( formattedArray );

Answer 2

如果我正确理解，在这种情况下，您可以创建一个方法来接收data，用作key（x轴）的参数和用作{ {1}}（y轴）作为参数。然后，您可以在输入value上使用简单的Array.map()来生成对数组，最后返回所需的输出。像这样：

data

const data = [
  {"id": 1, "cost": 323, "comparison": "High", "flag": "Alert"},
  {"id": 2, "cost": 745, "comparison": "Low", "flag": "Warning"},
  {"id": 3, "cost": 122, "comparison": "Medium", "flag": "Info"}
];

function getHistogram(data, keyParam, valParam)
{
    return [
        [keyParam, valParam],
        ...data.map(o => ["" + o[keyParam], o[valParam]])
    ];
}

console.log(getHistogram(data, "id", "cost"));

将数据数组转换为字符串

2 个答案: