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;

    }
  }

我使用外部类（即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以访问组件类中的图表元素

以下是组件类的更改。

   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第2卷主发行版中解决了“图表数据源未绑定刷新方法”的问题。

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

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

屏幕截图：

在单击按钮之前 Before button click

单击按钮后 After button click

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

2 个答案: