【问题标题】:How to add Aggregate (Sum) To Kendo UI Stacked Bar Chart如何将聚合(总和)添加到 Kendo UI 堆叠条形图
【发布时间】:2015-01-29 19:11:52
【问题描述】:

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

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

是否可以让工具提示显示值和总数?

我尝试在 seriesDefault 级别、系列内和其他一些级别上使用聚合无济于事。对于我的工具提示格式,我通常会尝试以下方法:

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

【问题讨论】:

    标签: javascript kendo-ui bar-chart


    【解决方案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

    【讨论】:

    • 我喜欢它。如果不深入研究代码,是否仍然可以将其分解并且每个都有自己的价值和总数?还是我坚持使用共享版本?不过非常感谢。
    • @Grandizer 查看我对常规模板所做的更改。
    • 我不想听起来不欣赏,但第二把小提琴和第一个完全一样。我猜也许你没有保存小提琴?当然,现在我很高兴看到更新。 ;)
    • @Grandizer 哎呀.. 立即尝试。 :)
    猜你喜欢
    • 2022-07-29
    • 2022-01-21
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-02-21
    • 1970-01-01
    相关资源
    最近更新 更多