如何在angular4中使用angular-highcharts创建动态图表ng-repeat

时间:2019-04-13 07:21:54

标签: angular multidimensional-array

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

0 个答案:

没有答案