1

我在 Angular 2 Web 应用程序中使用ng2-charts组件来显示图表。现成的示例让我对使用 Angular 和 TypeScript 在我的网页上显示图表有了一个很好的认识

我的 HTML 网页中的 Angular 标签

<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"

然后图表将其分别接受为“8”和“5”。

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

小胡子（双卷曲大括号）

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

我做我需要的数据。即85 被打印出来

不确定将数据分配给图表时哪里出错了。

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

4

0 回答 0