我想显示每个条带相应的数据。我已经尝试过,但无法获得结果。以下代码将显示到目前为止我已经尝试过的内容。对于前。如果我加入一个联赛,图表将根据联赛数量显示。 这是我的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;
}