Отмените выбор линии, все линии графика должны быть отключены

Question

Я работаю с Primeng, и у меня есть несколько графиков на мой взгляд.Я могу разбить линии, что является особенностью primeng.Я работаю с этим примером :

Существует функция, которую primeng предоставляет на своем сайте:

   selectData(event) {
        this.msgs = [];
        this.msgs.push({severity: 'info', summary: 'Data Selected','detail': this.data.datasets[event.element._datasetIndex].data[event.element._index]});
    }

Здесь я увеличиваю графики с помощью * ngFor:

<div class="container">
  <div class="chart"  *ngFor="let chartVal of data">
  <app-chart [optionsIncome]="options" *ngIf="show"></app-chart>
  </div>
</div>

С помощью этой функции я могу просто отключить линию для одного графика, но мне нужно будет отключить все остальные графики, см. Изображение:

Если я нажму на Первый набор данных, другие строки диаграмм должны быть отключены.Как я могу это сделать?

Мой start.compoment.hmtl

<input [(ngModel)]="inputValue" (ngModelChange)="reload()"/>
<select  (change)="selectedItem($event)">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </select>

  <div class="container">
      <div class="chart" *ngFor="let chartVal of data;let i = index">
        <app-chart #chart (click)="selectChart(i)" [optionsIncome]="options" *ngIf="show"></app-chart>
      </div>
    </div>

Мой start.component.ts выглядит следующим образом:

    import { Component, OnInit, ViewChildren } from '@angular/core';
    import {StartModel} from './start.model';
   @Component({
      selector: 'app-start',
      templateUrl: './start.component.html',
      styleUrls: ['./start.component.css']
    })
    export class StartComponent implements OnInit {

      public data = [];
      show = true;
      options: any;
      constructor() {
        this.options = {
          scales: {
              yAxes: [{
                  ticks: {
                      min: 0,
                      max: 20
                  }
              }]
          }
      };
      }

      ngOnInit() {

      }
      selectedItem(data) {

        if (data) {
          this.data.push(data);
          this.reload();
        }
        const minMax = {min: Math.random() * -1, max: Math.random() * 1};
        console.log(minMax.min, minMax.max)
        this.options.scales.yAxes[0].ticks.min = minMax.min;
        this.options.scales.yAxes[0].ticks.max = minMax.max;

      }

      reload () {
        this.show = false;
        setTimeout(() => this.show = true);
      }

    }

chart.component.html

<p-chart class="chart" type="line" [data]="data"  [options]="options"></p-chart>

chart.component.ts выглядит следующим образом:

import { Component, OnInit, Input, ViewChildren } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Component({
  selector: 'app-chart',
  templateUrl: './chart.component.html',
  styleUrls: ['./chart.component.css']
})
export class ChartComponent implements OnInit {

  data: any;
  msgs: any[];
  options: any;
  private _data = new BehaviorSubject({});
  selectChartIndex = 0;


  @Input() set optionsIncome(value) {
      this._data.next(value);
        }
  get optionsIncome() {
    return this._data.value;
  }
  constructor() {

    this.data = null;
    this.options = {};
  }
  ngOnInit() {
    this.data =  {
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
       datasets: [
        {
            label: 'First Dataset',
            data: [0.01, 0.25, 0.26, 0.4, 0.4, 0.37, 0.25],
            fill: false,
            borderColor: '#4bc0c0'
        },
        {
          label: 'Second Dataset',
          data: [0.11, 0.15, 0.26, 0.2, 0.4, 0.27, 0.1],
          fill: false,
          borderColor: '#4bc0c0'
      }
    ],
  };

  this.options = Object.assign({}, this.optionsIncome)

}

selectData(event) {
  console.log(event.optionsIncome)

}


}

Answer 1

Я не вижу ваших данных, как их установить, поэтому я просто сохраняю индекс по событию щелчка, но хорошим способом это можно сохранить в данные и получить индекс через event.option в функции selectData (), это измененный список:

• use viewChildren получить все компоненты диаграммы
• получить экземпляр диаграммы и использовать цикл для обновления опции (похоже, у вас есть оболочка для p-диаграммы, так что вынеобходимо получить экземпляр диаграммы по вашему приложению-диаграмме)

---

Вы можете найти больше хуков жизни в исходном коде инициализации или https://www.chartjs.org/docs/latest/developers/updates.html

export class yourComponent {

  @ViewChildren('chart')
  chartCompoents: QueryList<any>;
  
  this.selectChartIndex = 0;

  selectChart(index){
     this.selectChartIndex = index;
  }

  selectData(event) {
    ...
    const isFirstChart = this.selectChart === 0;
    if(isFirstChart){
       chartCompoents.forEach(chartCompoent => {
          chartCompoent.chart.hide = true;
          chartCompoent.chart.update();
       });
    }
  }

}

<div class="container">
  <div class="chart" *ngFor="let chartVal of data;let i = index">
    <app-chart #chart (click)="selectChart(i)" [optionsIncome]="options" *ngIf="show"></app-chart>
  </div>
</div>