Angular 中的 amcharts：ColumnSeries 'stroke' 和 'fill' 不是函数

Question

我正在 amcharts (Angular/Typescript) 中制作甘特图，除了为系列的列着色外，一切都很顺利。

进口：

import * as am4core from '@amcharts/amcharts4/core';
import * as am4charts from '@amcharts/amcharts4/charts';

import {
    create,
    options,
    useTheme,
    color
} from '@amcharts/amcharts4/core';

正在创建 ColumnSeries()：

private createColumnSeries(name: string, seriesData: GanttChartPoint[]): ColumnSeries {
    const series = new ColumnSeries();

    const colorForColumn = color(this.colorMap.get(name));
    series.stroke(colorForColumn);
    series.fill(colorForColumn);
    series.strokeOpacity = 1;

    series.data = seriesData;

    series.columns.template.width = am4core.percent(70);

    series.dataFields.openValueX = `startTime`;
    series.dataFields.valueX = `endTime`;
    series.dataFields.categoryY = 'resourceKey';
    series.columns.template.tooltipText = this._tooltipText;

    return series;

}

Typescript 在 IDE:

中给我错误

This expression is not callable. No constituent of type 'Color | Pattern | LinearGradient | RadialGradient' is callable.

在浏览器中，我得到：

TypeError: series.stroke is not a function.

其他一切正常，包括 ColumnSeries 上的所有函数。

同样的错误：

series.columns.template.stroke(colorForColumn);
series.columns.template.fill(colorForColumn);

我也试过：

series.columns.template.propertyFields.fill = this.colorMap.get(name);
series.columns.template.propertyFields.stroke = this.colorMap.get(name);

没有错误，但对图表没有任何影响。

this.colorMap.get(name) 返回一个字符串（例如 '#fcba03' ），它按预期工作。

Answer 1

根据AmCharts4 Series Template documentation，

let series = chart.series.push(new am4charts.ColumnSeries());
series.columns.template.stroke = am4core.color("#ff0000"); // red outline
series.columns.template.fill = am4core.color("#00ff00"); // green fill

因此，您的代码应该是：

series.columns.template.stroke = colorForColumn;
series.columns.template.fill = colorForColumn;

Sample Solution on StackBlitz

注意：由于问题中没有提供数据和图表示例，因此我提供了一个示例演示来重现问题和解决方案（图表结果可能与您的不同）。

参考

Gantt Chart

Angular 中的 amcharts：ColumnSeries 'stroke' 和 'fill' 不是函数

amcharts in Angular: ColumnSeries 'stroke' and 'fill' not a function

amcharts

typescript

angular

amcharts4

参考