Привязка данных в событии нажатия кнопки - PullRequest
Новая
       11

Привязка данных в событии нажатия кнопки

0 голосов
/ 16 мая 2018

Я использую диаграммы синхронизации EJ2 Sync с 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) для извлечения данных в серию диаграмм.И если я вызову метод PlotChart () в хуке жизненного цикла ngOnInit , график будет нарисован, и он не будет рисоваться, если он был вызван непосредственно нажатием кнопки.Обратите внимание, что данные все еще извлекаются, как и ожидалось, в обоих случаях.Мне кажется, что серия диаграмм не ограничена, если она не вызывается внутри ngOnInit ().

привязка параметра заголовка работает, но только привязка серии диаграмм не работает.

Кто-нибудь подскажет мнерешение для этого?

Ответы [ 2 ]

0 голосов
/ 29 июня 2018

Мы рады сообщить, что мы решили проблему «источник данных диаграммы не привязывается при обновлении» в последнем основном выпуске syncfusion Esstential Studio Volume 2. 

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

Пожалуйста, найдите ниже образец для справки, пример демонстрационной ссылки

Скриншот:

До нажатия кнопки Before button click

после нажатия кнопки After button click

0 голосов
/ 16 мая 2018

Я нашел решение следующим образом. Проблема заключалась в том, что диаграмма не обновлялась после установки источника данных для ряда диаграмм. Ниже приведен модифицированный код.

.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();
               }
        }
...