数字小部件可以在同一个仪表板上多次使用吗?
例如 我想显示每个团队成员的当前分数,每个团队成员一个带有向上/向下箭头的小部件,将当前分数与最后一个分数进行比较,如果分数上升,则小部件背景为绿色,如果分数下降,则小部件背景为绿色红色。
我的 .rb 文件传递来自 excel 文件的数据。
每个小部件都显示正确的当前分数 每个小部件都显示正确的向上/向下箭头 尽管 .coffee 显示相反,但所有小部件都显示与我想要的相同但相反的颜色。
就好像检测背景应该是哪种颜色的循环在第一次“通过”后停止一样。
错误或错误代码? number4.咖啡
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;
}
}
最佳答案
您可以在一个仪表板上多次使用一个小部件,但听起来您已经在使用该部件了。
您需要淡出小部件,设置背景色,然后再次淡入。否则您将看不到背景颜色的变化,因为渲染已经发生。
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()
希望这对您有所帮助。
关于css - 破折号:数字小部件背景颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36364349/