有一个在 Kendo 径向仪表内居中的值

Question

我正在尝试创建一个 Kendo UI 径向量规，但我不想让指针（指针）显示当前值，而是让文本居中仪表本身

这是我的空量规的 jsFiddle。

我隐藏了仪表的所有非必要部分，我使用范围属性来显示仪表的值

我希望能够在仪表中间显示值

这是我当前的 Gauge 定义（来自 jsFiddle）：

 $("#gauge").kendoRadialGauge({
     pointer: [],
     scale: {
         minorUnit: 5,
         startAngle: -30,
         endAngle: 210,
         max: 100,
         labels: { visible: false },
         majorTicks: { visible: false },
         minorTicks: { visible: false },
         ranges: [{
             from: 0,
             to: 40,
             color: "#008000"
         }, {
             from: 40,
             to: 60,
             color: "#E29F30"
         }]
     },
 });

对于奖励积分，如果您知道如何更改仪表的厚度，那将不胜感激！

Answer 1

您可以直接在 SVG canvas 上使用纯脚本、KendoUI drawinf 库或像 D3 这样的第三方库进行绘制。

或者您可以简单地将一个 HTML 元素与文本放在中间，并带有一些 CSS:

<div id="gauge-container">
    <div id="gauge"></div>
    <div id="val" class="gaugeVal"></div>
</div>

.gaugeVal {
    font-family: Arial, Verdana, Helvetica, sans-serif;
    font-size: 42px;
    font-weight: bold;
    position: relative;
    left: 0;
    right: 0;
    top: -100px;
    text-align: center;
    color: #555;
}

$("#val").text("64%");

Updated FIDDLE

有一个在 Kendo 径向仪表内居中的值

Have a value centered inside a Kendo Radial Gauge

javascript

css

kendo-ui

kendo-dataviz