如何在 kendo ui angular 中创建堆栈条形图

Question

我是 angular 的新手，我正在尝试使用 kendo UI 创建堆栈条形图。 我得到的是普通条形图而不是堆栈条形图，使用stack="true"也没有得到堆栈中的视图。

这是我的代码：

app.component.html

<kendo-chart style="height: 150px;">
    <kendo-chart-legend position="bottom" orientation="horizontal" [visible]="true"></kendo-chart-legend>

    <kendo-chart-area background="#F2FAFD"></kendo-chart-area>

    <kendo-chart-series>
        <kendo-chart-series-item type="column" *ngFor="let item of currentFindingsData" [data]="item.items" [name]="item.value" [stack]="true">

        </kendo-chart-series-item>
    </kendo-chart-series>
</kendo-chart>

应用程序组件.ts

public currentFindingsJson: GroupResult[] = [{
    Value: "3"
    color: "#2E75B5"
    status: "CAT2 (Minor)"    
}, {
    Value: "10"
    color: "#2E75B5"
    status: "CAT1 (Minor)"
}];

this.currentFindingsData = groupBy(currentFindingsJson, [{field: 'status'}]) as GroupResult[];

Answer 1

您需要指定[stack]="{ type: '100%' }" 。

检查此文档链接 - https://www.telerik.com/kendo-angular-ui/components/charts/series-types/bar/#toc-100-stacked-bar