破折號：數字小部件背景顏色

Question

能否在同一儀表板上多次使用數字小部件？

例如，我想顯示每個團隊成員的當前得分，每個團隊成員一個小部件，帶有向上/向下箭頭，將當前得分與最后得分進行比較，如果得分高於小部件背景，則為綠色；如果得分低於小部件背景，則為綠色是紅色的。

我的.rb文件傳遞來自excel文件的數據。

每個小部件顯示正確的當前分數每個小部件顯示正確的向上/向下箭頭盡管.coffee顯示相反，所有小部件都顯示與我想要的顏色相同但相反的顏色。

就像在第一次通過之后，停止檢測背景顏色的循環一樣。

錯誤或錯誤代碼？ 4號咖啡

class Dashing.Number4 extends Dashing.Widget

@accessor 'current', Dashing.AnimatedValue

@accessor 'difference', ->
if @get('last')
last = parseInt(@get('last'))
current = parseInt(@get('current'))
if last != 0
diff = Math.abs(Math.round((current - last) / last * 100))
"#{diff}%"
else
""

@accessor 'arrow', ->
if @get('last')
if parseInt(@get('current')) > parseInt(@get('last')) then 'fa fa-arrow-up' else 'fa fa-arrow-down'

constructor: ->
super

@onData(Dashing.lastEvents[@id]) if Dashing.lastEvents[@id]
onData: (data) ->
if parseInt(@get('current')) > parseInt(@get('last')) then $(@node).css('background-color', '#006600') else $(@node).css('background-color', '#660000')

number4.scss

//
// ----------------------------------------------------------------------------
// Mixins
// ----------------------------------------------------------------------------
@mixin transition($transition-property, $transition-time, $method) {
-webkit-transition: $transition-property $transition-time $method;
-moz-transition: $transition-property $transition-time $method;
-o-transition: $transition-property $transition-time $method;
transition: $transition-property $transition-time $method;
}

// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$value-color: #fff;

$title-color: rgba(255, 255, 255, 0.7);
$moreinfo-color: rgba(255, 255, 255, 0.7);

// ----------------------------------------------------------------------------
// Widget-number styles
// ----------------------------------------------------------------------------
.widget-number4 {

.title {
color: $title-color;
font-size: 40px;

 }

.value {
color: $value-color;

}

.change-rate {
font-weight: 500;
font-size: 30px;
color: $value-color;
}

.more-info {
color: $moreinfo-color;
font-size: 23px;
bottom: 40px;

}

.updated-at {
color: white;
font-size: 23px;
}

}

Answer 1

您可以在單個儀表板上多次使用小部件，但這聽起來好像已經使該部件正常工作了。

您需要淡出小部件，設置背景顏色，然后再次淡入。 否則，您將不會看到背景顏色的變化，因為渲染已經發生。

 onData: (data) -> if @get('last') if parseInt(@get('current')) > parseInt(@get('last')) then $(@node).fadeOut().css('background-color', "#006600").fadeIn() else $(@node).fadeOut().css('background-color', "#660000").fadeIn() 

希望這可以幫助。