Question

我需要使用kendo角度条形图组件在条形图的顶部显示总和值。请对此提供帮助。

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

            <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>

enter image description here

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

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

1 个答案: