我正在尝试创建一个Kendo UI径向仪表,但是我没有使用当前值的指针(针),而是希望将文本置于仪表本身内部
这是我空的Gauge的jsFiddle。
我隐藏了Gauge的所有非必要部分,我使用range属性来显示指标的值
我希望能够在仪表中间显示值
这是我目前的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"
}]
},
});
对于奖励积分,如果你知道如何改变仪表的厚度,那也是值得赞赏的!
答案 0 :(得分:0)
您可以使用普通脚本,KendoUI drawinf库或D3等第三方库直接在SVG画布上绘图。
或者您可以使用一些CSS将文本放在中心的HTML元素:
<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%");
更新了 FIDDLE