在Angular 2中单击“ Angular 2”的栏高图

Question

如何将Angular 2单击事件添加到图表类型为bar的高图中？我正在尝试使用下面使用代码：

let chart = new highCharts.Chart('container', Class1.createBarChart());
chart.series.click = this.clickBars();
clickBars() {
  console.log('bar clicked');
}

由于技术限制，我不想使用<chart>指令。另外，我不想在高图配置对象中调用单击事件。请让我知道适当的解决方案。

编辑：

我根据建议尝试以下代码：

 chart.options.plotOptions.series.point.events.click = (function(event) { this.clickBars(event) }).bind(this);

，但是这里的单击是不确定的。虽然我已经在课堂上创建了一个功能。

如果我使用的代码：

chart.options.plotOptions.series.point.events.click = (event) => this.clickBars(event);

然后它正在返回"非法返回语句"。

Answer 1

我在添加系列时做到这一点：

chart.addSeries({
  ...
  events: {
    click: (event: AreaClickEvent) => this.clickBars(event),
  },
});

您还可以在PlotOptions中注册单击处理程序。类似：

chart.options.plotOptions.series.events.click = (event) => this.clickBars(event);

update

看来您还需要调用更新。这是一个可行的JSFIDDLE：http://jsfiddle.net/80k0ojyh/

Answer 2

我希望这会有所帮助。在调用HighCharts-Chart的模板中，添加单击Ouput Decorator，如任何DOM元素。如果有的话，将会有重点信息。刚刚在您的组件(TS文件(中声明函数 OnPointSelect 。

模板

<highcharts-chart 
  [Highcharts]="Highcharts"
  [constructorType]="chartConstructor"
  [options]="chartOptions"
  [callbackFunction]="chartCallback"
  (click)="onPointSelect($event)"
  [(update)]="updateFlag"
  [oneToOne]="oneToOneFlag"

  style="width: 100%; display: block;"
>
</highcharts-chart>