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

Question

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

Answer 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
    }
});

然后设置工具提示小部件，以便在显示时将内容设置为仪表的当前值。 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

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

Kendo UI RadialGauge add custom tool-tip on pointer

gauge

kendo-ui