angular - 如何在 ng-charts 上创建动态数据集
问题描述
我在我的项目中使用 ng2-Charts,我可以创建具有固定数据集的图表(例如:我可以创建 3 行图表)。但是我想创建一个堆积条形图,即使我能够创建这个图表,但我无法动态创建数据集。
条形图会动态变化,一次会有两个条形图(堆叠),另一次将是 5 个,它纯粹是基于用户的。
我试过下面的代码。
getChartdata(){
//datainfo is response coming from API
let data_arry:any =[];
let data_obj:any ={};
let time_period:any = ["sun", "mon", "the", "wed", "the", "fri", "sat"];
for(let key of datainfo){
data_obj['data'] = [1,2,3,4]
data_obj['stack'] = 'a';
data_obj['barPercentage'] = 0.5;
data_obj['barThickness'] = 30;
data_arry.push(data_obj)
}
this.StringChart(data_arry, time_period)
}
StringChart(data_arry:any, time_period:any) {
var Tooltip_options: any = {
maintainAspectRatio: false,
scales: {
yAxes: [{
barPercentage: 1.6,
gridLines: {
drawBorder: false,
color: 'rgba(29,140,248,0.0)',
zeroLineColor: "transparent",
},
}],
xAxes: [{
barPercentage: 1.6,
gridLines: {
drawBorder: false,
color: 'rgba(0,242,195,0.1)',
zeroLineColor: "transparent",
},
ticks: {
padding: 20,
fontColor: "#9e9e9e"
}
}]
}
};
this.LC_Data = data_arry;
this.LC_Labels = time_period;
this.LC_Options = Tooltip_options;
}
当我执行 console.log 时,它显示了一个对象数组,但看不到图表,我收到以下错误:
ERROR TypeError: labels.slice is not a function
解决方案
推荐阅读
- angular - 我如何获得今天、下一个和上一个按钮的更改事件?
- clickhouse - 如何在 ClickHouse 中删除 EmbeddedRocksDB 表引擎的一行?
- java - 我在 android 中的卡片翻转动画出了什么问题?
- python - 如何从内部函数停止执行外部函数?
- xml - Google 测试:如何从多个测试套件运行中生成单个 xml 报告?
- jquery - 使用 jQuery 对多个表单进行表单验证
- macos - 在 MacOs Big Sur 上使用 OpenGL
- gstreamer - 使用 GStreamer 管道创建 onvif 合规摄像头
- javascript - 如何更新对象数组并将其分配给新变量
- azure - 如何获取具有角色权限的用户