javascript - 如何将聚合(总和)添加到 Kendo UI 堆积条形图

Question

我有一个包含基本数据的简单条形图。工具提示显示了它所代表的特定值，哪个值是好的。我想在它的下面显示整个条形/堆栈的总计。因此，如果顶部栏的相应值有 10、20、50，则该堆栈/栏的总数将为 80。

这是一个jsfiddle显示工作条形图。

是否可以让工具提示显示值和总计？

我尝试在系列默认级别、系列内和其他一些级别上使用聚合，但无济于事。我通常会尝试使用以下工具提示格式:

"#= series.name # #= kendo.format('{0:C0}', value) #<br />#= kendo.format('{0:C0}', sum) #";

Answer 1

使用常规模板:

<script id="altTemplate" type="text/x-kendo-template">
 #: series.name # -  #: value #
 # var chartOptions = $("\#chartBreakout").data("kendoChart").options #   
 # var categories = chartOptions.categoryAxis.categories #
 # var allSeries = chartOptions.series #
 # var catIndex = categories.indexOf(category) #   
 # var total = 0 # 
 # for (var i = 0; i < allSeries.length; i++) { # 
 #    total += allSeries[i].data[catIndex] #
 # } #
 Total - #: total #
</script>

fiddle

您可以将其更改为共享模板

tooltip: {
    visible: true,
    shared: true,
    sharedTemplate: kendo.template($("#template").html())
}

那么你的模板将是这样的:

<script id="template" type="text/x-kendo-template">
<div>#: category #</div>
# var total = 0; #
# for (var i = 0; i < points.length; i++) { #
<div>#: points[i].series.name# : #: points[i].value #</div>
# total += points[i].value #
# } #
Total #: total #
</script>

fiddle