我可以在 Kendo UI 径向量规下方添加标签吗？答案

【问题标题】：Can I add a label below a Kendo UI radial gauge?我可以在 Kendo UI 径向量规下方添加标签吗？
【发布时间】：2017-01-24 22:52:44
【问题描述】：

我正在使用 KendoUI 的径向量规，我想在 0 刻度和 300 刻度之间添加一个标签。初始化接受一个可以具有标签属性但配置实际刻度标签的对象，而我想添加一个居中的新单词，例如“磅”、“英里”等。

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

$("#gauge").kendoRadialGauge({
    pointer: {
        value: 37.4
    },
    scale: {
        startAngle: -30,
        endAngle: 210,

        minorUnit: 5,
        majorUnit: 25,

        min: 0,
        max: 100,
    }
});

这里有一个可以尝试的小提琴：http://jsfiddle.net/sThK3/104/

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

【问题讨论】：

找到了它们标签的来源，但我想你不会喜欢它，检查我刚刚提交的答案

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

【解决方案1】：

不幸的是，您的目标似乎并不像您希望的那样可行。

在仔细查看您链接的 Telerik 的径向量规示例后，我发现了一个用于此的图像资源：http://demos.telerik.com/kendo-ui/content/dataviz/dashboards/car-dashboard.png

此图像包含您所指的 {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;
  }

【讨论】：