Kendo UI RadialGauge在指针上添加自定义工具提示

时间:2016-01-19 17:56:17

标签: kendo-ui gauge

我想将图表的当前值显示到指针工具提示中,如果有任何方法可以添加工具提示,请检查gauge screenshot

1 个答案:

答案 0 :(得分:1)

此afaik没有内置方法。所以你可以像这样使用kndoUI工具提示对象:

在仪表配置中,我为指针指定了唯一的CSS颜色,以便我可以轻松查询SVG元素

$("#gauge").kendoRadialGauge({
    pointer: {
        value: $("#gauge-value").val(),
        color: "rgba(255,102,0,.999)"
    },
    scale: {
        minorUnit: 5,
        startAngle: -30,
        endAngle: 210,
        max: 180
    }
});

然后设置工具提示小部件,以便在onShow中,将内容设置为计量器的当前值。 filter属性指向任何具有唯一填充颜色的dom对象。

var tooltip = $('#gauge').kendoTooltip({
    filter: '[fill="rgba(255,102,0,.999)"]',
    position: "center",
    content: $("#gauge").data("kendoRadialGauge").value(),
    show: function(e) {
      e.sender.options.content = $("#gauge").data("kendoRadialGauge").value();
      e.sender.refresh();
    }
}).data("kendoTooltip");

这是一个道场 DEMO