Question

我在Angular 2网络应用程序中使用ng2-charts组件来显示图表。现成的样本给了我一个很好的想法，使用Angular和TypeScript

在我的网页上显示图表

我的HTML网页中的角色标记

<base-chart class="chart"
                [data]="doughnutChartData"
                [labels]="doughnutChartLabels"
                [chartType]="doughnutChartType"
                (chartHover)="chartHovered($event)"
                (chartClick)="chartClicked($event)"></base-chart>

打字稿

import {Component} from '@angular/core';
import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass} from '@angular/common';

import {CHART_DIRECTIVES} from '../../../ng2-charts';

// webpack html imports
let template = require('./doughnut-chart-demo.html');

@Component({
  selector: 'doughnut-chart-demo',
  template: template,
  directives: [CHART_DIRECTIVES, NgClass, CORE_DIRECTIVES, FORM_DIRECTIVES]
})
export class DoughnutChartDemoComponent {
  // Doughnut
  public doughnutChartLabels:string[] = ['Download Sales', 'In-Store Sales', 'Mail-Order Sales'];
  public doughnutChartData:number[] = [350, 450, 100];
  public doughnutChartType:string = 'doughnut';

  // events
  public chartClicked(e:any):void {
    console.log(e);
  }

  public chartHovered(e:any):void {
    console.log(e);
  }
}

但是，如果多个数据小部件的每个小部件都有一个图表组件。我该如何将数据绑定到图表？

我遍历 siteData 对象列表，查找状态属性。将此属性分配给图表数据。

<template ngFor #item [ngForOf]="siteData" #i="index">
    <div class="box-body box-profile">
                <h1 class="profile-username text-center" style="text-align: left;font-size: 25px;font-weight: 500;">{{item.siteName}}</h1>
                <hr style="font-family: Helvetica, Arial, Sans Serif;background: #E8EAEB;min-height: 100%;width: 100%;font-size: 0.9vw;"/>
                <h1 class="profile-username text-center" style="text-align: left;">Summary</h1>
                <ul class="products-list product-list-in-box">
                    <li class="item">
                        <base-chart class="chart"
                                    [data]="item.status"
                                    [chartType]="siteChartType"
                                    (chartHover)="siteChartHovered($event)"
                                    (chartClick)="siteChartClicked($event)">
                        </base-chart>
                    </li>
                    </ul>

            </div>
</template>

然而，这不起作用。它接受数据为字符串。!!!

即。例如：如果状态（数据类型编号）是85，则在行

中

[data]="item.status"

然后图表接受这个＆＃39; 8＆＃39;和＆＃39; 5＆＃39;分别

但是，如果我用一个简单的标签验证这个，使用

这样的东西

小胡子（双卷曲支撑）

<h1 class="headline text-green">{{item.status}}</h1>

我得到了我需要的数据。即 85 被打印

不确定在将数据分配到图表时我遇到了什么问题。

非常感谢任何正确方向的指导

在循环中获取图表数据并分配到Angular 2

0 个答案: