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

本文介绍了在Angular 2+组件中接收HighStock RangeSelector按钮事件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 我想在我的angular component中访问highstock rangeSelector按钮事件。我使用 angular2-highcharts 包来使用highcharts库。尝试使用（afterSetExtremes）绑定来访问它，但没有任何成功。代码是此处。请帮忙。 感谢!! ：//www.npmjs.com/package/highcharts#typescriptrel =nofollow noreferrer> TypeScript 下图为highcharts版本的安装和实现。 stackblitz 演示 从'@ 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 Demoimport { 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按钮事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！