我可以在Kendo UI径向仪表下方添加标签吗?

时间:2017-01-24 22:52:44

标签: javascript jquery svg kendo-ui kendo-asp.net-mvc

我正在使用KendoUI的径向仪表,我想在0刻度和300刻度之间添加一个标签。初始化接受一个对象,该对象可以具有标签属性但配置实际的刻度标签,而我想在中间添加一个以“磅”,“里程”等为中心的新单词。

http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/radialgauge

Image of gauge

rngDest2.Value = rngSource2.Value

以下是尝试使用它的小提琴:http://jsfiddle.net/sThK3/104/

更新1/25/2017: 这当然是可能的,但即使在阅读完他们的代码后,我也不明白标签的来源:http://demos.telerik.com/kendo-ui/radial-gauge/car-dashboard

1 个答案:

答案 0 :(得分:1)

不幸的是,您的目标可能不像您希望的那样可行。

在仔细查看telerik的径向测量示例后,我发现了一个用于此的图像资源:http://demos.telerik.com/kendo-ui/content/dataviz/dashboards/car-dashboard.png Image from Telerik's demo

此图片包含您在{k / mh,x1000 RPM}中引用的标签以及右侧的气体/温度图像。

在标尺上悬浮标签可能是另一种选择吗?或者构建自己的背景图像,其中包含您想要的标签。 :(

这将在您的CSS中引用,如下所示:

#gauge-container {
            margin: 0 auto;
            overflow: hidden;
            width: 614px;
            height: 324px;
            background: transparent url("../content/dataviz/dashboards/car-dashboard.png") no-repeat 50% 50%;
        }

../ content / dataviz / dashboards / car-dashboard.png 替换为包含正确标签的图片

我想看看我是否可以使用你的jsfiddle示例弄清楚如何在这上面浮动一个标签。

编辑:我现在收到了货物。看起来通过使用适当的css,您可以在径向中间浮动标签。

我通过以下方式实现了这一目标: JS:

 $("#gauge").append("<label>Test</label>");

CSS:

label {
  margin-left: 50%;
  margin-right: 50%;
  float: center;
  }