Question

在这个例子中，我可以在noteClick上成功更改图表注释的属性/样式... http://dojo.telerik.com/@pagemedias/oVuWI

我需要做的是从图表外部“触发”这个。

示例：我输出的信息列表显示在图表下方的图表上，当用户点击/悬停在图表下方的注释时，我想更改图表中相同注释的颜色/样式

当点击图表中的注释时，我能够突出显示图表下的注释（具有'key-A'的css类）（获取noteText ='A'并在'key-A'下添加新的样式类图表）。但我也希望实现相同的目标，只是相反（点击图表下方的注释并突出显示图表中的注释）。

如何访问图表中特定笔记的e.visual？

Answer 1

我没有看到使用KendoUI图表API的方法;但是，您可以通过直接操作chert svg元素来实现。

由于无法为音符指定类，请将音符文本的不透明度设置为0.99999，以便将其用作选择器：

var text = new kendo.drawing.Text(e.text,[targetPoint.x-4,targetPoint.y-23],{font: "bold 12px Arial,Helvetica,sans-serif",cursor: "pointer", opacity: 0.99999});

然后当您单击图表外部的列表项时，您可以使用此选择器获取所有注释文本节点：

var notes = $('.k-chart text[opacity="0.99999"]');

然后遍历注释以找到具有匹配文本的注释，更改颜色，找到图像节点并更改源：

notes.each(function(idx){
  if ($(this).text() == noteText){
        this.fill = "#ff0000";
        this.style.fill = "#ff0000";
        var img = $(this).prev('image');
        img.attr('xlink:href','http://www.appointmentreminder.com.au/images/v3/svg/other/greenicon/message.svg');
  }
});

KendoUI以编程方式获取/更改图表中的视觉注释

1 个答案: