如何在剑道图表中制作自定义工具提示？

Posted 2023-05-07

【中文标题】如何在剑道图表中制作自定义工具提示？

【英文标题】：how to make a custom tooltip in a Kendo Chart?

【发布时间】：2013-10-18 16:17:44

【问题描述】：

我正在使用带有 Razor/MVC 的 Kendos StockChart。

当我的用户将鼠标悬停在系列中的某个项目上时，我想要一个友好的字符串包含数据绑定数据，而不仅仅是值或类别。

class Node

    public int Value get; set;
    public DateTime Date  get; set;
    public string InterestingInfo  get; set;


@(html.Kendo().StockChart<Node>()
        .Name("chart") 
        .DataSource(ds => ds.Read(read => read.Action("_X", "Controller")))
        .DateField("Date")
        .Series(series => 
            series.Line(model => model.Value);
        )
        .Navigator(nav => nav
            .DataSource(ds => ds .Read(read => read.Action("_X", "Controller")))
            .Series(series =>
            
                series.Area(s => s.Value);
            )
        )       
        .Tooltip(tooltip => tooltip
            .Visible(true)
            .Shared(false)
            .Template("#=InterestingInfo#")
        )
      )
)

无论我在模板中使用什么，我似乎在工具提示中除了“未定义”之外什么都没有

我试过了，但老实说我不确定我在做什么，谁来处理这些（是 jquery、kendo 等）

 #=data.InterestingInfo#
 #=dataItem.InterestingInfo#

【参考方案1】：

作为一般的 Kendo UI 提示，如果您似乎无法将模板中的值打印出来，您可以制作模板：

"#console.log(data)#"

然后在开发工具中检查控制台。您应该能够弄清楚以这种方式传递给您的模板的内容。

【参考方案2】：

在您的 Node 类中，添加以下内容：

class Node

    public int Value get; set;
    public DateTime Date  get; set;
    public string InterestingInfo  get; set;
    public string Tooltip  get; set; 

在控制器中的读取方法“MethodX”中，使用所需的任何内容填充 Tooltip 属性。从那里，您可以使用以下代码：

.Tooltip(tooltip => tooltip
        .Visible(true)
        .Shared(false)
        .Template("#= dataItem.Tooltip #")
    )

dataItem 由 kendo 处理，它是特定绑定对象的数据。 '#= stuff here #' 是模板数据的剑道语法。祝你好运！

【讨论】：

一个了不起的想法。当我不得不为一个大的 List 构建模板时，这真的很有帮助