接收Angular 2+组件中的HighStock RangeSelector按钮事件

Question

我想要访问我的angular组件中的highstock rangeSelector按钮事件，我正在使用angular2-highcharts包来使用highcharts库。尝试使用(afterSetExtremes)绑定访问它，但没有成功。代码是here。请帮帮忙。

谢谢！！

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;

            }
          }
        },
      })
    })
  }
}