Highcharts Angular -无法在钻取事件中访问addSingleSeriesAsDrilldown和applyDrilldown

yruzcnhs  于 2023-10-20  发布在  Highcharts
关注(0)|答案(1)|浏览(162)

我正在使用钻取事件在图表中异步添加钻取。

events: {
    drilldown: function(e): void {
        if (!e.seriesOptions) {
            // e.point.name is info which bar was clicked
            this.showLoading('Simulating Ajax ...');
            const outer = {
                type: 'pie',
                size: '100%',
                innerSize: '75%',
                dataLabels: {
                    enabled: false
                },
                zIndex: 1,
                name: 'Cars',
                data: [
                    {
                        name: 'Other',
                        y: 24,
                        drilldown: 'true',
                    },
                    {
                        name: 'abc',
                        y: 7,
                    },
                    {
                        name: 'def',
                        y: 3,
                    }
                ]
            } as Highcharts.SeriesOptionsType

            this.hideLoading();
            this.addSingleSeriesAsDrilldown(e.point, outer); <------- HERE
            this.applyDrilldown(); <-------- And HERE
        }
    },
},

但是angular无法识别addSingleSeriesAsDrilldown和applyDrilldown方法作为'this'的一部分。
请参考下面的截图:methodNotAvailable
但问题是,如果我使用eslint跳过这个验证:

// eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-member-access
(this as any).addSingleSeriesAsDrilldown(e.point, outer);

然后,它编译良好,运行时也工作良好。
有没有什么想法可以让我的angular编译器识别这些方法?

vbopmzt1

vbopmzt11#

addSingleSeriesAsDrilldown方法是内部方法,因此您需要创建自己的类型来扩展Highcharts.Chart。举例来说:

interface ExtendedChart extends Highcharts.Chart {
  addSingleSeriesAsDrilldown(
    point: Highcharts.Point,
    options: Highcharts.SeriesOptionsType
  ): void;
}

现场演示:https://stackblitz.com/edit/highcharts-angular-a-custom-plugin-btw9ff?file=src%2Fapp%2Fapp.component.ts
**网址:**https:github.com/highcharts/highcharts-angular#property-xxx-does-not-exist-on-type-yyy
**API引用:**https:api.highcharts.com/class-reference/Highcharts.Chart#addSeriesAsDrilldown

相关问题