Question

我正在使用Primeng，我的视图中有多个图表。我能够取消作为primeng特征的线条。我正在使用此example：

有一个功能，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>

使用此功能，我只能禁用一个图表的行，但我需要禁用所有其他图表，请参阅图像：

如果我点击First Dataset，那么应禁用其他图表行。我怎么能这样做？

我的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

我无法看到你的数据如何设置，所以我只是通过点击事件来保存索引，但是它可以保存到数据，并通过selectData（）函数中的event.option获取索引，这是修改后的列表：

使用viewChildren获取所有图表组件
获取图表实例并使用for循环更新选项（它看起来你有p图表的包装，所以你需要通过你的应用程序图表获取图表实例）

您可以在priming's source code或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>

取消选择行应禁用所有图表行

1 个答案: