在Angular 2+组件中接收HighStock RangeSelector按钮事件 [英] Recieve HighStock RangeSelector button event in Angular 2+ component

问题描述

我想在我的angular component中访问highstock rangeSelector按钮事件。我使用 angular2-highcharts 包来使用highcharts库。尝试使用（afterSetExtremes）绑定来访问它，但没有任何成功。代码是此处。请帮忙。

感谢!! ：//www.npmjs.com/package/highcharts#typescriptrel =nofollow noreferrer> TypeScript 下图为highcharts版本的安装和实现。

< a href =https://highstock-angular-cli.stackblitz.io/ =nofollow noreferrer> stackblitz 演示

 <@ c $ c>从'@ angular / platform-b​​rowser-dynamic'导入{platformBrowserDynamic}; 
从'@ angular / core'导入{NgModule，ViewChild，ElementRef}; 
从'@ angular / platform-b​​rowser'导入{BrowserModule}; 
从'@ angular / core'导入{Component}; 
导入*为'highcharts / highstock'的高级图表; 
从'@ angular / http'导入{Jsonp，JsonpModule}; 
 
 @Component（{
选择器：'my-app'，
 templateUrl：'./app.component.html'，
 styleUrls：['./ app.component.css']，
 
））
导出类AppComponent {
 name ='Angular 5 Highstock'; 
 @ViewChild（container，{read：ElementRef}）container：ElementRef; 
 
构造函数（jsonp：Jsonp）{
 jsonp.request（'https://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json& callscribe = JSONP_CALLBACK'）。subscribe（res => {
 
 
 Highcharts.stockChart（this.container.nativeElement，{
 rangeSelector：{
 buttons：[ {
 type：'month'，
 count：1，
 text：'1m'，
 events：{
 click：function（e）{
 console.log（'click clickd'）; 
} 
} 
}，{
类型：'month'，
 count：3，
 text：'3m'
}，{
类型：'month'，
 count：6，
 text：'6m'
}，{
键入：'ytd'，
 text：'YTD'
}，{
类型：'year'，
 count：1，
 text：'1y'
}，{
 type：'all'，
 text：'All1'
}] 
}，
图表：{ 
 zoomType：'x'
}，
 series：[{
 name：'AAPL'，
 data：res.json（），
 tooltip ：{
 valueDecimals：2 
} 
}]，
 xAxis：{
 events：{
 afterSetExtremes：（e）=> {
 // console.log（e）; 
 // this.button = e.rangeSelectorButton.count; 
 
 
 $ b}，
}）
}）
} 
} 
  

I want to access highstock rangeSelector button event inside my angular component.I am using the angular2-highcharts package to use the highcharts library. Tried to access it using the (afterSetExtremes) binding but without any success. The code is here. Please help.

Thanks!!

解决方案

Check TypeScript highcharts version installation and implementation below.

stackblitz Demo

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;

            }
          }
        },
      })
    })
  }
}

这篇关于在Angular 2+组件中接收HighStock RangeSelector按钮事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！