根据JSON为HighCharts创建系列数据

乔纳森

我正在尝试根据以下JSON汇总HighCharts柱形图的数据。每个组中的数据各不相同,如果对应的X系列没有数据,HighCharts要求其Y轴数据为0。首先,我具有以下JSON:

{
    "groups": {
        "1567310400000": [
            {
                "groupName": "Fruits",
                "documentCount": 5
            }
        ],
        "1569902400000": [
            {
                "groupName": "Fruits",
                "documentCount": 1
            },
            {
                "groupName": "Desserts",
                "documentCount": 5
            },
            {
                "groupName": "Vegetables",
                "documentCount": 6
            }
        ]
    }
}

所需的输出:我想从上面的数据创建一个对象的排序数组,如下所示:

[{
    name: 'Desserts',
    data: [0, 5]
}, {
    name: 'Fruits',
    data: [5, 1]
}, {
    name: 'Vegetables',
    data: [0, 6]
}]

到目前为止,我有以下代码:

const chartXAxisData = [];
const chartYAxisData = [];
const names = [];
const doccounts = [];

for (const key in data.groups) {
  chartXAxisData.push(formatDate(key, 'MMM dd, yyyy', 'en-US', 'GMT').toString());

  for (let i = 0; i < data.groups[key].length; i++) {
    const groupname = data.groups[key][i].groupName;
    const doccount = data.groups[key][i].documentCount;
    if ( names.includes(groupname)) {
      doccounts[names.indexOf(groupname)].push(doccount);
    } else {
      names.push(groupname);
      doccounts.push([doccount]);
    }
}}

for (const name in names) {
   chartYAxisData.push({
     name: names[name],
     data: doccounts[name]
   });
}

这将提供以下输出,而不是所需的输出:

[{
    name: 'Desserts',
    data: [5]
}, {
    name: 'Fruits',
    data: [5, 1]
}, {
    name: 'Vegetables',
    data: [6]
}]

如何修复代码以获得所需的输出?

卡布森

一种方法是使用辅助字典groupName作为键。检查我为您制作的这段代码,

const data = {
  groups: {
    "1567310400000": [
      {
        groupName: "Fruits",
        documentCount: 5
      }
    ],
    "1569902400000": [
      {
        groupName: "Fruits",
        documentCount: 1
      },
      {
        groupName: "Desserts",
        documentCount: 5
      },
      {
        groupName: "Vegetables",
        documentCount: 6
      }
    ]
  }
};
const keys = Object.keys(data.groups);
const dic = {};
for (let k = 0; k < keys.length; k++) {
  for (const group of data.groups[keys[k]]) {
    const groupName = group.groupName;
    const documentCount = group.documentCount;
    if (!dic.hasOwnProperty(groupName)) {
      dic[groupName] = {
        groupName,
        data: new Array(keys.length).fill(0)
      };
    }
    dic[groupName].data[k] = documentCount;
  }
}
const values = Object.keys(dic).sort().map(n => dic[n]);
console.log(values);

结果

[ { groupName: 'Fruits', data: [ 5, 1 ] },
  { groupName: 'Desserts', data: [ 0, 5 ] },
  { groupName: 'Vegetables', data: [ 0, 6 ] } ]

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Highcharts:使用 JSON 数据创建多个系列

来自分类Dev

如何从JSON数据创建Highcharts系列以供使用

来自分类Dev

Highcharts为柱形图创建系列

来自分类Dev

如何从mysql为highcharts创建正确的json数据格式

来自分类Dev

检索具有多个系列的Highcharts的JSON数据?

来自分类Dev

如何将json数据传递到highcharts系列?

来自分类Dev

使用来自AJAX / JSON的数据填充Highcharts系列

来自分类Dev

如何使用json更新highcharts中系列下的数据属性?

来自分类Dev

使用json数据创建动态Highcharts图

来自分类Dev

根据数据框列总和创建熊猫系列

来自分类Dev

为数据JSON创建数组

来自分类Dev

为数据JSON创建数组

来自分类Dev

Highcharts多个数据系列

来自分类Dev

Highcharts JSON PHP多个系列

来自分类Dev

Highcharts JSON PHP多个系列

来自分类Dev

根据值设置Highcharts系列栏的颜色

来自分类Dev

根据用户输入在Highcharts中添加系列

来自分类Dev

根据GAS中的JSON数据创建数组

来自分类Dev

根据 Html 结构创建嵌套的 Json 数据

来自分类Dev

HighCharts / Javascript:将每月数据系列重采样为季度/年度?

来自分类Dev

Highcharts 中的多个系列数据但第二个折线图显示为压扁?

来自分类Dev

如何在Highcharts中制作json数组名称系列名称,数组数据-series数据?

来自分类Dev

将值Json数据获取为系列名称Highchart

来自分类Dev

使用MySQL按月为HighCharts格式化JSON数据

来自分类Dev

Highcharts CSV数据加载并解析为单独的数组和json

来自分类Dev

Highcharts:使用json数据创建简单的折线图

来自分类Dev

Highcharts C#转JSON-结构化系列数据

来自分类Dev

Highcharts C#转JSON-结构化系列数据

来自分类Dev

在熊猫数据框中根据条件为组创建列

Related 相关文章

热门标签

归档