在Kendo Radial Gauge内部设置一个值

时间:2015-11-13 10:56:56

标签: javascript css kendo-ui kendo-dataviz

我正在尝试创建一个Kendo UI径向仪表,但是我没有使用当前值的指针(针),而是希望将文本置于仪表本身内部

这是我空的Gauge的jsFiddle

我隐藏了Gauge的所有非必要部分,我使用range属性来显示指标的值

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

Clean Gauge

这是我目前的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"
         }]
     },
 });

对于奖励积分,如果你知道如何改变仪表的厚度,那也是值得赞赏的!

1 个答案:

答案 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