按钮点击事件中的数据绑定

Question

我正在使用 EJ2 Sync Fusion Charts 和 Angular 6 创建散点图。

.html 文件

 <ejs-chart id="chart-container">
<e-series-collection>
      <e-series [dataSource]="series1" typeof="Scatter"name="Male"></e-series>
       <e-series [dataSource]="series2" typeof="Scatter" name="Female"></e-series>
  </e-series-collection>
</ejs-chart>
<div>
  <button ejs-button (click)="PlotChart()">Draw</button>
</div>

.ts 文件

import { Component, OnInit } from '@angular/core';
import { ChartData } from '../chartdata.service';

   export class ScatterComponent implements OnInit {

    public series1: Object;
    public series2: Object;
    public title: string;

    constructor() { }

    ngOnInit(): void {

     // this.PlotChart(); //-> this works!!
    }

    public PlotChart(): void {

      this.title = 'Height Vs Weight';
      this.series1 = ChartData.prototype.getScatterData().series1;
      this.series2 = ChartData.prototype.getScatterData().series2;

    }
  }

我正在使用外部 class（即 ChartData）将数据提取到我的图表系列中。如果我在 ngOnInit 生命周期挂钩中调用 PlotChart() 方法，图表就会绘制，如果它是由单击按钮直接触发的，则不会绘制。请注意，在这两种情况下，数据仍在按预期检索。在我看来，除非在 ngOnInit() 内部调用图表系列，否则图表系列不受限制。

标题参数绑定有效，但图表系列绑定无效。

谁能告诉我解决方法？

Answer 1

我找到了如下解决方案。问题是将数据源设置为图表系列后图表没有刷新。下面是修改后的代码。

.html

  <ejs-chart #chart id="chart-container">
<e-series-collection>
      <e-series [dataSource]="series1" typeof="Scatter"name="Male"></e-series>
       <e-series [dataSource]="series2" typeof="Scatter" name="Female"></e-series>
  </e-series-collection>
</ejs-chart>
<div>
  <button ejs-button (click)="PlotChart()">Draw</button>
</div>

更改：添加了#chart 以访问组件中的图表元素class

以下是组件class的变化。

   import { ViewChild } from '@angular/core';

        export class ScatterComponent {
          @ViewChild('chart')
          public chart: Chart;

         public PlotChart(): void {

         this.chart.series[0].dataSource = ChartData.prototype.getScatterData().series1;
            this.chart.series[1].dataSource = ChartData.prototype.getScatterData().series2;
            this.chart.refresh();
               }
        }

Answer 2

我们很高兴地宣布，我们已经在最新的 syncfusion Esstential Studio Volume 2 主版本中解决了问题 "chart data source not binding on refresh method"。

<div align='center'>
    <ejs-chart style='display:block;'>            
    </ejs-chart>
</div>

请找到以下示例供您参考， sample demo link

截图：

点击按钮之前

点击按钮后

按钮点击事件中的数据绑定

Data bind in button click event

syncfusion

angular