Kendo UI RadialGauge在指针上添加自定义工具提示 [英] Kendo UI RadialGauge add custom tool-tip on pointer

问题描述

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

I want to show the current value of chart into the pointer tool-tip, If there any way to add tool-tip please suggest, please check gauge screenshot

推荐答案

此afaik没有内置方法.因此，您可以像这样使用kndoUI工具提示对象:

There is no built in method for this afaik. So you can use the kndoUI tooltip object like this:

在量规配置中，我为指针分配了唯一的CSS颜色，这样我就可以轻松查询SVG元素

In the gauge config, I assign a unique CSS color to the pointer so I can easily query for the SVG element

$("#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对象.

Then setup the tooltip widget so that onShow, the content is set to the current value of the gauge. The filter attribute points at any dom object with our unique fill color.

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");

这里是道场 演示

Here is a dojo DEMO

这篇关于Kendo UI RadialGauge在指针上添加自定义工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！