如何在条形图中显示值的总和（Kendo角度4）

Question

我需要使用剑道角度条形图组件在条形图的顶部显示总和值。 请帮忙。

以下是呈现条形图的模板代码。

            <kendo-chart-legend position="vertical" orientation="vertical"></kendo-chart-legend>
            <!--kendo-chart-tooltip format="{0}"></kendo-chart-tooltip-->
            <cst-chart-series>
                <kendo-chart-series-item type="bar" [stack]="true" *ngFor="let item of series2" type="column"  [data]="item.amount" [name]="item.name">
                    <kendo-chart-series-item-labels [content]="labelContent" color="white" position="center" background="none">
                        <kendo-chart-series-item-tooltip>
                            <ng-template let-value = "value" >
                                {{value > 0 ? (value | number:'.'+(selectedDecimalPosition ? selectedDecimalPosition : 0)+'-'+(selectedDecimalPosition ? selectedDecimalPosition : 0)) : ''}}
                            </ng-template>
                        </kendo-chart-series-item-tooltip>
                    </kendo-chart-series-item-labels>
                </kendo-chart-series-item>
            </kendo-chart-series>
        </kendo-chart>

在此处输入图片说明

Answer 1

应该可以通过显示堆栈值的附加系列和自定义标签内容来实现此目的：

//series
<kendo-chart-series-item *ngFor="let item of series2" ...>
</kendo-chart-series-item>

//total series
<kendo-chart-series-item 
    type="column" [data]="totalSeriesData" [labels]="{ visible: true, content: totalLabelContent  }">
</kendo-chart-series-item>

// component
public totalSeriesData: any[] = [];

public totalLabelContent(args: any): string {
  return args.stackValue;
}

constructor() {
  const totalLength = this.series2.reduce((acc, item) => Math.max(item.amount.length, acc), 0);
  for(let idx = 0; idx < totalLength; idx++) {
    this.totalSeriesData.push(0);
  }
}

https://plnkr.co/edit/9SF7d1YCud5qPRWvgB65?p=preview