English 中文(简体)
利用宇宙和高射线,希望从宇宙航行安全局调来,用于透镜Click
原标题:Using Angular and Highcharts and want to use fromEvent from RxJS for legendItemClick

我在我的高智慧图表中加上没有数据的一系列数据,这些数据最初并不明显。 在标本旁边点击时,触发了一项事件,要求提供系列数据并显示数据。

This is basically working with the code from https://api.highcharts.com/highcharts/plotOptions.series.events.legendItemClick

但是,我想利用来自皇家航天学会的Event,来聆听“幻影”活动。 经过3天的搜查和审判,我向社区投降。

问题回答

我不敢肯定,你为什么要特别从Event上登出<>,因为其背靠背功能,你可以使用一种照相的行为! 希望这一榜样有助于

如果你不喜欢这种解决办法,那么就应当强调具体要求<条码>的要求。 因为它像许多工作一样,对已经存在预谋的解决办法。

import { Component, ViewChild } from  @angular/core ;
import { bootstrapApplication } from  @angular/platform-browser ;
import  zone.js ;
import * as Highcharts from  highcharts ;
import { HighchartsChartModule } from  highcharts-angular ;
import { fromEvent, Observable, Subject, Subscription } from  rxjs ;

@Component({
  selector:  app-root ,
  standalone: true,
  template: `<highcharts-chart #chart [Highcharts]="Highcharts" [options]="chartOptions">
             </highcharts-chart>`,
  imports: [HighchartsChartModule],
})
export class App {
  private subscription: Subscription = new Subscription();
  Highcharts: typeof Highcharts = Highcharts;
  @ViewChild( chart ) chartRef: any;
  private loadDataSubject: Subject<Highcharts.SeriesLegendItemClickEventObject> =
    new Subject<Highcharts.SeriesLegendItemClickEventObject>();
  private loadDataObservable$: Observable<Highcharts.SeriesLegendItemClickEventObject>;

  constructor() {
    this.loadDataObservable$ = this.loadDataSubject.asObservable();
  }

  ngOnInit() {
    this.subscription.add(
      this.loadDataObservable$.subscribe(
        (event: Highcharts.SeriesLegendItemClickEventObject) => {
          this.loadData();
        }
      )
    );
  }

  chartOptions: Highcharts.Options = {
    plotOptions: {
      series: {
        events: {
          legendItemClick: (
            event: Highcharts.SeriesLegendItemClickEventObject
          ) => {
            this.loadDataSubject.next(event);
          },
        },
      },
    },
  };

  ngAfterViewInit() {
    this.chartRef.chart.addSeries({
      type:  line ,
      name:  nameTest ,
      id:  idTest ,
      data: [],
      visible: false,
    });

    // Subscribe to the legendItemClick event using fromEvent
    // const chart2 = Highcharts.charts[Highcharts.charts.length - 1];
    // const legendItemClick$ = fromEvent(
    //   chart2?.legend?.allItems[0]?.legendGroup?.element,
    //    click 
    // );
    // legendItemClick$.subscribe(() => {
    //   console.log( Legend item clicked using RxJS );
    // });
  }

  loadData() {
    var temp = this.chartRef.chart.get( idTest );
    temp.setData([10, 20]);
  }

  ngOnDestroy(): void {
    this.subscription.unsubscribe();
  }
}

bootstrapApplication(App);

stackblitz





相关问题
Angular matSort not working on Date column by desc

Trying to sort the material table with date column , date format is MM/DD/YYYY ,h:mm A , order of date is not by latest date and time. Anything which i missed from the below stackblitz code. https:/...

热门标签