在剑道图的工具提示上添加聚合函数

Add aggregate function on tooltip in kendo chart

本文关键字:添加 函数 工具提示      更新时间:2023-09-26

我正在使用一个有日期x轴的剑道图。我有几个不同日期的点,但x轴只显示每月视图。我设置了一个自定义聚合函数来显示每个月对应的最后一个数据点,即

数据点为:

2014年1月1日-1500美元2014年1月3日-2000美元2014年1月10日-75美元

图中所示为2014年1月-75美元

当我将鼠标悬停在这些点上时,我想显示一个自定义工具提示,其中包含与这些点相关的一些自定义值。工具提示中显示的值是由我的业务逻辑生成的,我认为在这里讨论它并不重要。比方说,对于上面提到的值,我想显示的工具提示是:

2014年1月1日-100美元2014年1月3日-200美元2014年1月10日-$300

但是,当我将鼠标悬停在当前月份的聚合点上时,我希望工具提示显示值"C"(因为我以前的聚合函数)。然而,显示的值是:

2014年1月-100美元

我的问题是,有没有办法为我的剑道工具提示指定一个自定义聚合函数?

图表的代码是:

public class MyModel{
            public DateTime Date {get; set;}
            public double ShownValue {get; set;}
            public double ToolTipValue {get; set;}
        }
@(Html.Kendo().Chart(List<MyModel>)
        .Name("myChart")
        .DataSource(dataSource => dataSource                
            .Sort(s => s.Add(fc => fc.Date))
        )                        
        .SeriesDefaults(seriesDefaults =>
            seriesDefaults.Line().Style(ChartLineStyle.Smooth)
        )
        .Series(series =>
        {
            series.Line(value => value.ShownValue, category => category.Date)                    
                .Aggregate("selectLastPoint");
        })
        .CategoryAxis(axis => axis                        
                    .Labels(labels => labels.Rotation(0).Format("MMM 'yy"))
                    .Date()                        
                    .BaseUnit(ChartAxisBaseUnit.Months)                                        
                    .Justify(false)
        )
        .ValueAxis(axis => axis.Numeric()
            .Labels(labels => labels.Format("{0:c}"))
            )
        .Tooltip(t => t
            .Visible(true)
            .Format("{0:c}")
            .Template("#= kendo.format('{0:C}',dataItem.TooltipValue) #")
        ))

我的聚合函数的代码是:

function selectLastPoint(values) {
    return values[values.length - 1];
}

我希望你能帮助我。问候,路易斯。

没关系,我刚刚找到了答案。在聚合函数上,我只返回当前点的值。我应该返回整个数据项如下:

function selectLastPoint(values, series, dataItems) {
    return dataItems[dataItems.length - 1];
}