angular - 在 Angular 2+ 组件中接收 HighStock RangeSelector 按钮事件

Question

我想在我的角度组件中访问 highstock rangeSelector 按钮事件。我正在使用该angular2-highcharts包来使用 highcharts 库。尝试使用(afterSetExtremes)绑定访问它，但没有任何成功。代码在这里。请帮忙。

谢谢！！

Answer 1

将您的模板更新为

template: `
  <chart type="StockChart" [options]="options" (click)="onClick($event)">
  </chart>
`,

功能

onClick(e) {
  console.log('You clicked '+e.toElement.innerHTML+" button")
}

Plunker演示

Answer 2

检查下面的TypeScript highcharts 版本安装和实现。

stackblitz演示

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { NgModule, ViewChild, ElementRef } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Component } from '@angular/core';
import * as Highcharts from 'highcharts/highstock';
import { Jsonp, JsonpModule } from '@angular/http';

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

})
export class AppComponent {
  name = 'Angular 5 Highstock';
  @ViewChild("container", { read: ElementRef }) container: ElementRef;

  constructor(jsonp: Jsonp) {
    jsonp.request('https://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=JSONP_CALLBACK').subscribe(res => {


      Highcharts.stockChart(this.container.nativeElement, {
        rangeSelector: {
          buttons: [{
            type: 'month',
            count: 1,
            text: '1m',
            events: {
              click: function (e) {
                console.log('button clickd');
              }
            }
          }, {
            type: 'month',
            count: 3,
            text: '3m'
          }, {
            type: 'month',
            count: 6,
            text: '6m'
          }, {
            type: 'ytd',
            text: 'YTD'
          }, {
            type: 'year',
            count: 1,
            text: '1y'
          }, {
            type: 'all',
            text: 'All1'
          }]
        },
        chart: {
          zoomType: 'x'
        },
        series: [{
          name: 'AAPL',
          data: res.json(),
          tooltip: {
            valueDecimals: 2
          }
        }],
        xAxis: {
          events: {
            afterSetExtremes: (e) => {
              // console.log(e);
              // this.button = e.rangeSelectorButton.count;

            }
          }
        },
      })
    })
  }
}