2017-01-24 20 views
1

我正在使用KendoUI的徑向量表,我想在0滴答和300滴答之間添加一個標籤。該initalization發生在一個對象,可以有一個標籤屬性,但在構成實際的刻度標記,而我想添加一個新字,中間爲中心,如「英鎊」,「萬里」等我可以在Kendo UI徑向測量儀下面添加標籤嗎?

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

Image of gauge

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

     minorUnit: 5, 
     majorUnit: 25, 

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

這裏有一個撥弄來試試吧:http://jsfiddle.net/sThK3/104/

UPDATE 2017年1月25日: 這當然是可能的,但即使在閱讀他們的代碼後,我不明白標籤來自何處:http://demos.telerik.com/kendo-ui/radial-gauge/car-dashboard

+0

發現他們的源標籤,但我不認爲你會喜歡它,檢查我剛剛提交的答案 –

回答

1

不幸的是,它看起來像你的目標可能不是你想要的方式。

在Telerik的徑向計例如更緊密地尋找後,你掛我發現用於此的圖像資源:http://demos.telerik.com/kendo-ui/content/dataviz/dashboards/car-dashboard.pngImage from Telerik's demo

該映像包含您指爲K/MH,×1000 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; 
    } 
相關問題