angular - 在 c3.generate 方法上设置 data.id
问题描述
我有一个 Angular 组件,它向 API 发送请求并接收结果列表。该页面必须使用 c3 获取这些数据并生成图形。但我不熟悉该框架,我正在努力研究如何在 c3.generate 方法上指定 data.id。为了清楚起见:我有propertyName
一个字符串,我想显示propertyCode
它,我需要将它用作数组的每个索引的标识符,value1, value2
并且value3
是与该查询相关的货币值。所以,基本上,我必须将propertyCode
每个数组的 id 设置为propertyName
仅显示和值。下面是我的解决方案的实际代码,它不起作用,我知道为什么,我迷失在 js 上。但是,数组是这样填充的:
0:
[[Prototype]]: Object
1: Array(1)
0:
propertyCode: "123"
propertyName: "foo"
value1: 100
value2: 55
value3: 45
[[Prototype]]: Object
length: 1
generateGraph(resultArray: any[]): void {
if (resultArray.length === 0) {
return;
}
let data = [{}];
resultArray.forEach((e) => {
data.push([{ 'propertyCode': e.propertyCode.toString(), 'propertyName': e.propertyName, 'value1': e.value1, 'value2': e.value2, 'value3': e.value3 }]);
});
this.graph = c3.generate({
data: {
json: data,
type: 'bar',
keys: {
x: 'propertyCode',
value: ['value1', 'value2', 'value3'],
}
},
title: {
text: 'Search of property code ' + resultArray[0].propertyCode
},
bar: {
width: {
ratio: 0.5
}
},
legend: {
position: 'right',
},
axis: {
y: {
tick: {
format: function (d) { return Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(d); }
}
},
x: {
type: 'category',
}
}
});
}
解决方案
推荐阅读
- firebase - 用nodejs sdk编写的Firebase函数可以通过firestore规则吗?
- python-3.x - 如何捕捉 Google Video Intelligence DeadlineExceeded 异常?
- java - 如何将 java.util.random 转换为 int
- keras - Keras 中输入数据的规范化
- javascript - 回调中的匿名函数是否使用 iife 调用?
- ruby-on-rails - Rails:使用信息按类别搜索和过滤书籍
- gcc - zlib 未找到,但已安装
- javascript - 加载数据后用数据表中的html代码替换文本
- azure - 如何在 azure web 应用程序的 aspnet 核心应用程序中运行 jsreports.net
- excel - Excel Power Query 连接到另一个表