Я хочу показать каждый бар с соответствующими данными.Я пытался, но я не могу получить результат.Следующий код покажет, что я пробовал до сих пор.Напримересли я вступил в одну лигу, график будет отображаться в зависимости от количества лиг.Вот мой HTML-код
<div class="league-list">
<div class="league-list-item" *ngFor="let league of oneLeagueList;let i=index">
<header>
<span>Winning amount</span>
<h3>
<sub>
<i class="fa fa-inr" aria-hidden="true"></i>
</sub>{{league.total_winning_amount}}</h3>
</header>
<div class="league-details">
Pay
<sub>
<i class="fa fa-inr" aria-hidden="true"></i>
</sub>{{league.deposit_amount}}
<div class="line-chart" [chart]="chartLine"></div>
{{league.teams_joined}}/{{league.entry_count}} joined
<a (click)="SelectTeam(league)" class="rounded-button" *ngIf="league.teams_joined<league.entry_count">join now</a>
</div>
</div>
</div>
Угловой код
import { Chart } from 'angular-highcharts';
GetLeagues() {
this.service.GetLeagues(this.match_id, this.appUser.token).subscribe(x => {
if (x != undefined && x.status == 1) {
this.oneLeagueList.forEach(e=> {
this.PlotChartLine(e.entry_count, e.teams_joined);
});
}
})
}
PlotChartLine(entry_count, teams_joined) {
var chartLine = new Chart({
chart: {
type: 'bar',
height: 12,
margin: [0, 0, 0, 0]
},
title: {
text: null
},
tooltip: {
enabled: false
},
exporting: { enabled: false },
credits: { enabled: false },
subtitle: {
text: null
},
xAxis: {
visible: false,
},
yAxis: {
min: 0,
max: entry_count,
visible: false
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
data: [entry_count],
color: "rgb(199,204,207)"
}, {
data: [teams_joined],
color: "rgb(0,97,145)"
}]
});
this.chartLine = chartLine;
}