В Angular, когда я попытался вызвать функцию Onclick () из компонента и попытался построить график ng2 в других компонентах, не загружает график - PullRequest
Новая
       18

В Angular, когда я попытался вызвать функцию Onclick () из компонента и попытался построить график ng2 в других компонентах, не загружает график

0 голосов
/ 08 мая 2020

Я новичок ie и пытаюсь реализовать в angular typscript для построения линейного графика. У меня есть 2 компонента: 1. app.component 2. chart.page.component.

В компоненте приложения у меня есть функция onclick (), которая должна строить линейный график в компоненте диаграммы. Но при нажатии ничего не происходит, кроме в то же время, если я добавлю onclick в chart.component, затем его график.

Я добавляю свой образец кода, который я использую компонент щелчка кнопки

  1. app.component.ts 
import { Component } from '@angular/core';
import { ChartPageComponent } from '../app/chart-page/chart-page.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {

  title = 'testing-app';

  constructor(private chartObj: ChartPageComponent){}

  data1: any;
  data2: any;
  data3: any;

  onApplyClick() {
    this.chartObj.showChart();
  }

}
chart.page.component.ts 
import { Component, OnInit } from '@angular/core';
import { ChartOptions, ChartType, ChartDataSets } from 'chart.js';
import * as pluginDataLabels from 'chartjs-plugin-datalabels';
import { Label, Color, BaseChartDirective } from 'ng2-charts';

@Component({
  selector: 'app-chart-page',
  templateUrl: './chart-page.component.html',
  styleUrls: ['./chart-page.component.css']
})

export class ChartPageComponent implements OnInit {

  public chart: BaseChartDirective;
  public OTLineChartOptions: (ChartOptions & { annotation: any }) = { responsive: true, scales: {}, annotation: {} };
  public OTLineChartLabels: Label[];
  public OTLineChartType: ChartType = 'line';
  public OTLineChartLegend = false;
  public OTLineChartPlugins = [pluginDataLabels];
  public OTLineChartDataReach: ChartDataSets[] = [{ data: [], label: '' }];
  public OTLineChartDataEngagement: ChartDataSets[] = [{ data: [], label: '' }];
  public OTLineChartDataSentiment: ChartDataSets[] = [{ data: [], label: '' }];
  public OTLineChartColors: Color[];

  constructor() { }

  ngOnInit(): void {
    // this.chart.chart.update();
  }

  public showChart() {
    // this.chart.update();
    this.OTLineChartOptions = {
      responsive: true, 
      scales: {
        // We use this empty structure as a placeholder for dynamic theming.
        xAxes: [{}],
        yAxes: [
          {
            id: 'y-axis-0',
            position: 'left',
          },
          {
            id: 'y-axis-1',
            position: 'right',
            gridLines: {
              color: 'rgba(255,0,0,0.3)',
            },
            ticks: {
              fontColor: 'red',
            }
          }
        ]
      },
      annotation: {
        annotations: [
          {
            type: 'line',
            mode: 'vertical',
            scaleID: 'x-axis-0',
            value: 'March',
            borderColor: 'orange',
            borderWidth: 2,
            label: {
              enabled: true,
              fontColor: 'orange',
              content: 'LineAnno'
            }
          },
        ],
      },
    };
    this.OTLineChartLegend = true;
    this.OTLineChartLabels = [ '5', '8', '9' ];
    this.OTLineChartDataReach = [ 
      { data: [451.5, 198, 0], label:'New Delhi' }, 
      { data: [0, 0, 5025], label:'Delhi' } 
    ];
    this.OTLineChartDataEngagement = [       
      { data: [2.5, 0, 0], label:'New Delhi' }, 
      { data: [0, 0, 0], label:'Delhi' }  
    ];
    this.OTLineChartDataSentiment = [       
      { data: [5, 0, 0], label:'New Delhi' }, 
      { data: [0, 0, 0], label:'Delhi' }  
    ];

  }

}

Помогите, пожалуйста, где я допустил ошибку ... Заранее спасибо.

...