大家好,我使用的图表JS与Angular 我有在每个月的订单数量在这个例子中,我有在10月和11月的订单数量,我想把它放在数据图表
订购服务列表订购()订阅(
commande =>{
this.orders = commande;
this.oc=this.orders.filter(item => item.dateCreated && new Date(item.dateCreated).getMonth() === 9).length
this.nov=this.orders.filter(item => item.dateCreated && new Date(item.dateCreated).getMonth() === 10).length
})
这是chart js的代码我想把nov和oc的值放到data[]中
public lineChartData: ChartConfiguration<'line'>['data'] = {
labels: [
'October',
'Novermber',
'December'
],
datasets: [
{
data:[this.oc,this.nov,5],
label: 'Series A',
fill: true,
tension: 0.5,
borderColor: 'black',
backgroundColor: 'rgba(255,0,0,0.3)'
}
]
};
public lineChartOptions: ChartOptions<'line'> = {
responsive: false
};
public lineChartLegend = true;
public lineChartType!: "line";
这是我的html代码
<h1> oc :{{oc}}</h1>
<h1> nov :{{nov}}</h1>
<div style="display: block;">
<canvas baseChart width="800" height="400"
[type]="'line'"
[data]="lineChartData"
[options]="lineChartOptions"
[legend]="lineChartLegend">
</canvas>
</div>
这是结果,值oc和nov在本机显示中工作,但在chart中不工作,这是我第一次使用chart js,有人告诉我我必须做什么
1条答案
按热度按时间ni65a41a1#
我修复了这个问题,问题是在订阅数据可用之前呈现图表,所以我只在收到数据后才呈现图表,我像这样设置el布尔变量
在html中,我添加了一个ngif指令,只在数据可用时才呈现图表
和它的世界,如你所见,抱歉迟到了,我现在才注意到问题仍然悬而未决