在 Angular 4 中动态填充 ng2 图表

Question

我编写了一个示例应用程序，用于从服务中获取 json 格式的数据并将其绑定到 UI 上的图表。

问题是当我尝试绑定数据时，它没有。我尝试了很多方法来绑定数据，但都没有成功。

功能如下： 第 1 页：包含 2 个下拉菜单。 1 与图表类型和 2 与样本类型。 在选择两个下拉值时，我单击一个按钮，该按钮触发 GlobalService 中的函数 fetchData()。

下面是 GlobalService 中的 getter & setter

 getChartData() {
  return this.chartData;
 }

 setChartData(response: any) {
   this.chartData = response.data;
   // console.log(this.chartData);
 }

 getChartlabel() {
  return this.chartLabel;
 }

 setChartLabel(response: any) {
   this.chartLabel = response.label.label;
   // console.log(this.chartLabel);
 }

 getResponse() {
   return this.response;
 }
 setResponse(response: any) {
   this.response = response;
   // console.log(response);
 }

功能是这样的

 fetchData(chart: any, sample: any) {
  console.log();
  const request = {
    chartType: this.selectedChart, // 'BAR | LINE'
    sampleType: this.selectedSample // 'COUNT'
  };

  this.http.post('http://localhost:22222/school/getData', request, this.options)
    .subscribe(
      res => {
        res = res.json();
        const responseData = res;
        console.log(responseData);
        if (responseData.hasOwnProperty('data')) {
          console.log('Data Fetched');
          this.setResponse(responseData); // Setting response
          this.setChartData(responseData); // setting data
          this.setChartLabel(responseData); // setting label
          this.router.navigate(['/gotoChartPage']); // navigating to next page chart.html
        } else {
          alert('Data Fetch Failed');
        }
      });
 }

现在我的 chart.html 看起来像 here 中提到的那样

<div id='barDiv' class="onerow" *ngIf="1">
        <h4 class="m-2">Bar Chart</h4>
    <div style="display: block">
        <canvas baseChart width="800" height="500"
                [datasets]="barChartData" // --> This is where i want to update Data
                [labels]="barChartLabels" // --> This is where i want to update Labels
                [options]="barChartOptions"
                [legend]="barChartLegend"
                [chartType]="barChartType">
          </canvas>
      </div>      

那么我的Chart.component如下

  /*******************BAR CHART*********************************/
  public barChartOptions: any = {
     scaleShowVerticalLines: false,
    responsive: true
  };

 public barChartLabels: Array<any> = []; // ["STD 1", "STD 2", "STD 3", "STD 4", "STD 5", "STD 6", "STD 7", "STD 8", "STD 9", "STD 10"]; Sample Data
 public barChartType  = 'bar';
 public barChartLegend  = true;
 public barChartData: any[]  = []; // [ {'data': [40, 32, 42, 23, 43, 35, 50, 48, 37, 45], label: 'COUNT'}]; -- Sample Data

 constructor(private global: GlobalService) {
  this.barChartData =  this.global.chartData;
  this.barChartLabels =  this.global.chartLabel;
}

我的 json 回复格式如下：

对于单个数据集：

{
 "data":
    {"data": [40,32,42,23,43,35,50,48,37,45], "label":"COUNT"},
 "label":
    {"label":["STD 1","STD 2","STD 3","STD 4","STD 5","STD 6","STD 7","STD 8","STD 9","STD 10"]}
}

和

对于多个数据集：

{
 "data":
    {"data": [40,32,42,23,43,35,50,48,37,45], "label":"MVM"},
    {"data": [04,03,02,03,03,05,50,80,07,45], "label":"HVD"},
    {"data": [20,32,42,23,43,60,50,48,70,40], "label":"BMS"},
 "label":
    {"label":["STD 1","STD 2","STD 3","STD 4","STD 5","STD 6","STD 7","STD 8","STD 9","STD 10"]}
}

当我尝试以这种方式分配时，图表没有出现。但是，如果我硬编码 barChartLabels 和 barChartData 中的值，图表会显示。

我也试过这种方式

`<canvas baseChart width="800" height="500"
   [datasets]="global.chartData" // --> This is where I need to update Data
   [labels]="global.chartLabel" // --> This is where I need to update Labels
   [options]="barChartOptions"
   [legend]="barChartLegend"
   [chartType]="barChartType">
 </canvas>`

感谢您的帮助。我被这个问题所困扰，超出了我的大脑所能想到的范围。

我在堆栈上遇到了这个例子：CLICK & CLICK 但是，这不是正确的做法。

我想知道为什么数据没有直接绑定到这样的图表

   [datasets]="global.chartData" // --> This is where I need to update Data
   [labels]="global.chartLabel"

Answer 1

您的全局服务将当前数据集保存在chartData 成员中，并且您在组件的构造函数中读取了该变量一次。但是，当数据发生变化时，全局服务中的 chartData 成员会被替换，但组件中的成员会一直指向原始成员，因此您永远看不到变化。

您可以在全局服务中使用可观察的流来通知客户端数据的变化。