highcharts 当我们单击highchart系列时调用Angular 分量方法

ybzsozfc 于 2022-11-10 发布在 Highcharts

关注(0)|答案(4)|浏览(165)

我使用angular2-highcharts，我想在一个局部函数中调用一个组件方法，但我不知道这是怎么可能的。
你能帮我吗？举个例子：http://plnkr.co/edit/gOLGytp9PZXiXvv2wv1t?p=preview

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { NgModule, Component }    from '@angular/core';
import { BrowserModule }          from '@angular/platform-browser';
import { ChartModule }            from 'angular2-highcharts';

@Component({
    selector: 'my-app',
    styles: [`
      chart {
        display: block;
      }
    `],
    template: `<chart [options]="options"></chart>`
})
class AppComponent {
    constructor() {
        this.options = {
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false,
                type: 'pie'
            },
            title : { text : 'simple chart' },
            plotOptions: {
                series: {
                    turboThreshold:3000,
                    cursor: 'pointer',
                    point: {
                        events: {
                            click: function() {
                                console.log(this);
                                // I want to call a component method here
                            }
                        }
                    }
                }
            },
            series: [{
                name: 'Brands',
                colorByPoint: true,
                data: [{
                    name: 'Microsoft Internet Explorer',
                    y: 56.33
                }, {
                    name: 'Chrome',
                    y: 24.03,
                    sliced: true,
                    selected: true
                }, {
                    name: 'Firefox',
                    y: 10.38
                }, {
                    name: 'Safari',
                    y: 4.77
                }, {
                    name: 'Opera',
                    y: 0.91
                }, {
                    name: 'Proprietary or Undetectable',
                    y: 0.2
                }]
            }]
        };
    }
    options: Object;

    methodToCall(){
        console.log("Method called");
    }
}

@NgModule({
    imports:      [BrowserModule, ChartModule.forRoot(require('highcharts'))],
    declarations: [AppComponent],
    bootstrap:    [AppComponent]
})
class AppModule { }

platformBrowserDynamic().bootstrapModule(AppModule);

highcharts

来源：https://stackoverflow.com/questions/44045016/call-an-angular-component-method-when-we-click-on-highchart-series

4条答案

按热度按时间

kknvjkwl1#

要访问click事件返回的信息，并访问您的组件方法，您可以执行以下操作：

plotOptions: {
            series: {
                turboThreshold:3000,
                cursor: 'pointer',
                point: {
                    events: {
                        click: function(e){
                           const p = e.point
                           this.myComponentMethod(p.category,p.series.name);
                        }.bind(this)
                    }
                }
            }
        },

我希望这会有帮助。

赞(0）回复(0）举报 2022-11-10

eeq64g8w2#

您只需要将匿名函数替换为箭头函数或将其绑定到组件：

point: {
    events: {
        click: () => {
            console.log(this);
            // I want to call a component method here
        }
    }
}

或

point: {
    events: {
        click: (function(){
            console.log(this);
            // I want to call a component method here
        }).bind(this)
    }
}

或者甚至：

point: {
    events: {
        click: this.myComponentMethod.bind(this)
    }
}

赞(0）回复(0）举报 2022-11-10

ql3eal8s3#

我知道我来晚了，但他的可能会帮助一些人。angular2-highchart包确实提供了访问系列事件的权限。

<chart [options]="options">
  <series (click)="methodToCall($event)"
  </series>
</chart>
 <p>Series-Clicked={{data}}</p>

JS代码。

methodToCall(e){
    console.log("Method called");
   this.data = e.originalEvent.point.name
}

这里是更新的Plunk。

赞(0）回复(0）举报 2022-11-10

q5iwbnjs4#


**/*----- component method to generate Pie-chart from high chart Library  -----*/**

drawPieChart() {
    HighCharts.chart("pie_chart", {
      accessibility: { enabled: false },
      chart: {
        type: 'pie',
        plotBackgroundColor: '#FFF',
        plotShadow: true
      },
      title: {
        text: 'My Title'
      },
      tooltip: {
        // pointFormat: '{point.y}<br/><b>{point.percentage:.1f}%</b>'
      },
      plotOptions: {
        pie: {
          allowPointSelect: true,
          cursor: 'pointer',
          dataLabels: {
            enabled: true,
            //format: '<b>{point.name}</b>: {point.y} '*//change .name & .y according to your data-set*
          },
          showInLegend: true,
          events: {
            click: 
              this.myCustomMethod.bind(this)
          },
        },//pie
      },
      series: [{
        name: 'TA',
        colorByPoint: true,
        type: 'pie',
        data: this.data,*// <<< here you need to put your JSON variable or Json object*
      }]
    });

  }

**/* ---- on click event of pie myCustomMethos() 'll get call ---- */**

myCustomMethod(t:any) {
    console.log(t.point.name)
}

赞(0）回复(0）举报 2022-11-10

我来回答

highcharts 当我们单击highchart系列时调用Angular 分量方法

4条答案

相关问题

热门标签

最新问答