rea*_*ser 0 javascript arrays charts highcharts reactjs
我正在尝试在使用 highcharts ( https://api.highcharts.com/highcharts/ ) 的react js 中构建饼图,它只接受以下格式的饼图数据(或者我可能错了): Sample Fiddle here : https://jsfiddle.net/react_user1/e9cbsrdL/1/
data: [
{name: 'abc', y: 10},
{name: 'def', y: 90}
]
Run Code Online (Sandbox Code Playgroud)
我从 API 获得的数据如下所示:
const counts:[
{
"id": "all",
"type": "all",
"count": 1403
},
{
"id": "bad",
"type": "bad",
"count": 0
},
{
"id": "failed",
"category": false,
"type": "failed",
"count": 58
},
{
"id": "changed",
"category": true,
"type": "changed",
"count": 123
}
Run Code Online (Sandbox Code Playgroud)
所以我试图在这里实现三件事:
1. Remove the first {}, with the "id": "all"
2. Rename the key: "id" to name & "count" to y
3. Remove the keys: "type" & "category" & their data
Run Code Online (Sandbox Code Playgroud)
感谢您提供的任何帮助,即使是可以提供帮助的部分答案也将不胜感激。
我认为你可以使用Array.prototype.filter()和Array.prototype.map()组合。
有了filter()你可以删除的价值,你做什么并不需要-你的情况all-然后map(),你可以为你创建数组的新的结构。
从文档 - 上面提到的链接:
该
filter()方法创建一个新数组,其中包含通过提供的函数实现的测试的所有元素。该
map()方法创建一个新数组,其中填充了对调用数组中的每个元素调用提供的函数的结果。
像这样:
const counts = [
{
"id": "all",
"type": "all",
"count": 1403
},
{
"id": "bad",
"type": "bad",
"count": 0
},
{
"id": "failed",
"category": false,
"type": "failed",
"count": 58
},
{
"id": "changed",
"category": true,
"type": "changed",
"count": 123
}
];
const result = counts.filter(f => f.id !== 'all')
.map(e => ({ name: e.id, y: e.count }));
console.log(result);Run Code Online (Sandbox Code Playgroud)
我希望这有帮助!
| 归档时间: |
|
| 查看次数: |
93 次 |
| 最近记录: |