Angular 8中使用angular-highcharts实现可变半径饼图遇问题求助

问题1：使用angular-highcharts时出现错误17（缺少可变半径饼图模块） #

错误17提示需要引入特定脚本，本质是你没把variablepie模块添加到Highcharts的加载列表里。原来的配置只导入了more和exporting，漏掉了可变半径饼图必需的核心模块。

修改你的app.module.ts，补充variablepie模块的导入和注册：

import { ChartModule, HIGHCHARTS_MODULES } from 'angular-highcharts';
import * as more from 'highcharts/highcharts-more.src';
import * as exporting from 'highcharts/modules/exporting.src';
// 新增：导入可变半径饼图模块
import * as variablepie from 'highcharts/modules/variable-pie.src';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ ..., ChartModule ],
    providers: [ 
        ..., 
        { 
            provide: HIGHCHARTS_MODULES, 
            useFactory: () => [ more, exporting, variablepie ] // 将variablepie加入模块数组
        } 
    ]
})
export class AppModule { }

完成后重新运行项目，错误17应该就能消失了。

问题2：切换到highcharts-angular后出现属性绑定错误 #

你遇到的Can't bind to 'Highcharts' since it isn't a known property错误，是因为组件的属性名是小写的highcharts，不是大写的Highcharts。另外，还要记得导入variablepie模块并注入到Highcharts对象中，否则可变半径饼图还是无法正常渲染。

步骤1：导入并注册variablepie模块 #

修改你的组件代码（myComponent.component.ts），添加模块注入逻辑：

import * as Highcharts from 'highcharts';
// 导入可变半径饼图模块
import variablepie from 'highcharts/modules/variable-pie';

// 将模块注入到Highcharts实例中
variablepie(Highcharts);

// 保持类型声明
Highcharts: typeof Highcharts = Highcharts; 
chartOptions: Highcharts.Options = {
    chart: { type: 'variablepie' },
    credits: { enabled: false },
    title: { text: 'Variable radius' },
    tooltip: { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' },
    series: [{
        name: 'transactions',
        minPointSize: 10,
        zMin: 0,
        type: 'variablepie',
        innerSize: '50%',
        data: [
            {name: "Forwarding", y: 379, z: 379},
            {name: "Processing", y: 883, z: 883},
            {name: "Processed", y: 487, z: 487},
            {name: "Error", y: 986, z: 986},
            {name: "Incomes", y: 43, z: 43}
        ]
    }]
};

步骤2：修正模板中的属性绑定 #

把模板里的大写[Highcharts]改成小写的[highcharts]：

<highcharts-chart style="width: 100%; display: block" 
    [highcharts]="Highcharts" 
    [options]="chartOptions">
</highcharts-chart>

另外，正常情况下myModule.module.ts里只需要导入HighchartsChartModule即可，不需要额外添加NO_ERRORS_SCHEMA（除非你有其他自定义元素需求）。

内容的提问来源于stack exchange，提问作者Emilien