timulsoft Dashboards.JS是一個功能齊全的工具，用于為JavaScript平臺創(chuàng)建儀表板。

Stimulsoft Dashboards.JS v2019.4.2最新版下載：https://www.evget.com/product/4101/download

新增功能：

• 支持CosmosDB連接。
• 支持用戶對圖表、儀表、進(jìn)度、指標(biāo)元素進(jìn)行排序。
• 對Data.World的支持。
• 支持從Data.World在線服務(wù)中檢索數(shù)據(jù)。
• 能夠在圖表?xiàng)l件中使用字段參數(shù)和系列。

改進(jìn)功能：

• 在發(fā)布向?qū)е懈铝藘x表板對象創(chuàng)建代碼。
• 對圖表的所有線系列標(biāo)記進(jìn)行動畫處理。
• 從零軸開始值設(shè)置為false時的柱形圖動畫。

BUG修復(fù)：

• 清除儀表板和報表服務(wù)器端的緩存。
• 如果沒有數(shù)據(jù)，則Table元素不顯示總計(jì)。
• Mac窗體中的選項(xiàng)卡存在問題。
• 下拉菜單消失的問題。
• 內(nèi)存問題，為設(shè)計(jì)器和查看器添加調(diào)度方法。
• DatePicker無法選擇“Today”今天。
• 布爾文本格式的錯誤。
• 導(dǎo)出包含儀表板中總數(shù)的表時發(fā)生錯誤。
• 使用儀表中的負(fù)范圍顏色值。

更多內(nèi)容請關(guān)注stimulsoft中文網(wǎng)www.stimulsoft.cn（點(diǎn)擊“了解更多”獲取stimulsoft最新動態(tài)）。

享一個很酷炫的視頻，通過滑動桿控制儀表進(jìn)度顯示，同時伴有燈光效果，看起來非常震撼。html非常簡單，只有幾個元素，使用了一個進(jìn)度條滑動桿的控件。接下來我們重點(diǎn)來看一下CSS，從這里可以看到，頁面長什么樣子。

好的，現(xiàn)在來說一下滑動桿的樣式，這是一個滑軌的樣式，其他屬性沒有什么特別的，我們主要看一下這幾個。

首先要自定義進(jìn)度條的樣式，box-shadow：因?yàn)檫@個控件瀏覽器默認(rèn)會有一套自己的樣式，只有把 shadow設(shè)為難才可以自定義模式，如果把這個樣式去掉，那整個滑桿其它的樣式全部都不起效了。

非常重要的是這兩句的設(shè)置，這兩句有什么用呢？當(dāng)移動滑塊時，大家注意滑軌，在滑塊的左邊它就會變成藍(lán)色，滑塊的右邊還是黑色，無論移到什么地方都一樣，主要用來控制這一個的。

接下來分析一下這兩句，為什么背景這里用了兩個顏色？第一個是漸變色，第二個是黑色。最主要的是漸變色里面的這兩個顏色還是同一個，lwhite都是這一個變量，說白了它壓根沒有漸變的效果。

·box-shadow：為什么不直接用這個顏色而要把它搞成漸變？box-shadow：首先用兩個顏色，是因?yàn)榛壦托枰獌蓚€顏色，滑塊的左邊是藍(lán)色，滑塊的右邊是黑色，這兩個顏色。之所以會對同一個顏色做漸變，是因?yàn)樾枰浜蟗oxsha一起來使用。

通常background-size是用來設(shè)置背景圖顯示的，對單一顏色是不起作用的。這里用線性漸變就相當(dāng)于取巧。white用了一個小技巧，因?yàn)檫@里漸變的就是同一個顏色，和單一顏色沒有區(qū)別，初始值設(shè)置為0100%，也就是這一個顏色。漸變的顏色開始是沒有顯示的，也就是現(xiàn)在這樣子。

如果我們把它改一下，改成50%。第一個顏色就會顯示到中間位置了，再改成90%，試一下。第一個顏色就會顯示到后面了。

→當(dāng)滑塊移動的時候通過JS修改這一個值，是不是就可以動態(tài)同步滑軌的顏色狀態(tài)了？這里先改回0，再看一下這個樣式。s inputltype='range：webkit-lips thumb。這是一個滑塊的樣式，沒有什么特別要說的，用的屬性都很簡單。

主要就來看一下這個偽元素，用這個偽元素就說明要修改的是滑塊的樣式。僅此而已。

→還有就是滑塊的發(fā)光效果用的就是陰影，也就是這一個的樣式。以下是清除中間顯示百分比數(shù)字的樣式，沒有什么特別的，主要是中間發(fā)光的效果。后面兩個是中間儀表盤的樣式，但現(xiàn)在還沒有span，需要通過JavaScript創(chuàng)建出來。樣式很簡單，沒有特別的，我們來看看JS。現(xiàn)在已經(jīng)獲取了幾個對象來做一個for循環(huán)，畫出100個指針。我們需要通過JavaScript來創(chuàng)建這些span，因?yàn)檫@些span需要在圖形的表盤上分布。這些span需要旋轉(zhuǎn)一定的角度，然后再放入main中。現(xiàn)在表盤應(yīng)該出來了，沒有問題，但是似乎有些擁擠。我們需要修改CSS，將寬度設(shè)置為40個TB。將滑動桿向下移動25個TB。現(xiàn)在來看一下效果。現(xiàn)在來處理一下，當(dāng)移動滑塊時，顏色和中間的百分比會隨之變化。實(shí)際上，這并不難，只需要監(jiān)聽滑桿的輸入事件。我們需要修改滑軌的背景大小，只需將其水平方向的where復(fù)給百分號即可，而垂直方向則保持100%的寬度。

中間顯示的百分比很簡單，只需要將值給它就可以了。我們來看一下效果，移動滑塊沒有問題，滑軌的顏色和上面的百分比都跟著發(fā)生變化了。

接下來，我們需要寫一個函數(shù)，當(dāng)移動滑塊時，改變儀表指針的顏色。我們需要循環(huán)所有的指針。當(dāng)i小于傳入的值時，我們需要設(shè)置前面一部分指針的顏色和屬性。

首先，我們需要設(shè)置自定義的顏色bg。我們使用了CSS的色相飽和度函數(shù)，后面兩個值代表飽和度和亮度，通常設(shè)置為100%和50%。這并不重要，我們需要設(shè)置色相。我們需要根據(jù)不同位置的指針設(shè)置不同的色相，這樣顏色看起來會更加豐富。另外，我們還需要設(shè)置sg的顏色屬性。

其他指針使用CSS中設(shè)置的黑色背景和透明sg。現(xiàn)在來看一下指針的顏色狀態(tài)是否發(fā)生了變化，移動滑塊，沒有問題，可以跟著發(fā)生變化了。

這個視頻到此結(jié)束，感謝大家的收看。