如何将聚合(总和)添加到 Kendo UI 堆积条形图
How to add Aggregate (Sum) To Kendo UI Stacked Bar Chart
我有一个包含基本数据的简单条形图。工具提示显示它所代表的具体 值 是好的。我想在它的正下方显示整个 bar/stack 的总计。因此,如果顶部栏的相应值有 10、20、50,则 stack/bar 的总数将为 80。
这是一个显示工作条形图的jsfiddle。
是否可以让工具提示显示价值和总数?
我曾尝试在 seriesDefault 级别、系列内和其他几个级别使用聚合,但无济于事。我通常会为我的工具提示格式尝试以下方法:
"#= series.name # #= kendo.format('{0:C0}', value) #<br />#= kendo.format('{0:C0}', sum) #";
使用常规模板:
<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>
您可以将其更改为共享模板
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>
我有一个包含基本数据的简单条形图。工具提示显示它所代表的具体 值 是好的。我想在它的正下方显示整个 bar/stack 的总计。因此,如果顶部栏的相应值有 10、20、50,则 stack/bar 的总数将为 80。
这是一个显示工作条形图的jsfiddle。
是否可以让工具提示显示价值和总数?
我曾尝试在 seriesDefault 级别、系列内和其他几个级别使用聚合,但无济于事。我通常会为我的工具提示格式尝试以下方法:
"#= series.name # #= kendo.format('{0:C0}', value) #<br />#= kendo.format('{0:C0}', sum) #";
使用常规模板:
<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>
您可以将其更改为共享模板
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>