如何在 angular 甘特图 High Chart 中的 Y 轴标签上使用点击事件

Question

如何在甘特图中的Y轴标签上添加点击事件。它在 javascript 中运行良好，但在 angular 中运行不正常。在 angular 中给出以下错误“类型‘{ events: { click: () => void; }; }' is not assignable to type 'YAxisLabelsOptions'。对象字面量只能指定已知属性，并且 'events' 不存在于类型 'YAxisLabelsOptions'” 中。使用 9.3.x 版本的 highcharts 库。 enter image description here

https://stackblitz.com/edit/highcharts-angular-gantt-jxcjsz?file=src%2Fapp%2Fapp.component.ts

Answer 1

highcharts-custom-events 模块不为 Highcharts 扩展类型，因此您需要创建自己的类型。例如：

interface ExtendedYAxisLabelsOptions extends Highcharts.YAxisLabelsOptions {
  events: YAxisLabelsEvents
}

interface YAxisLabelsEvents {
  click(): void;
}

export class AppComponent {
  Highcharts: typeof Highcharts = Highcharts;

  chartOptions: Highcharts.Options = {
    ...,
    yAxis: {
      labels: {
        events: {
          click: function() { console.log(this) } 
        } 
      } as ExtendedYAxisLabelsOptions, 
      ...
    }
  };
}

实例： https://stackblitz.com/edit/highcharts-angular-gantt-jyyhro?file=src%2Fapp%2Fapp.component.ts

如何在 angular 甘特图 High Chart 中的 Y 轴标签上使用点击事件

How to use click event on Y-axis label in angular Gantt chart High Chart

gantt-chart

highcharts

angular