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

Question

我正在使用带有 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#

Answer 1

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

"#console.log(data)#"

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

Answer 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 #' 是模板数据的剑道语法。祝你好运！