我在一个spotfire文本区域有一个小的javascript。它按设计工作。我保存并关闭了射击。重新打开它根本不显示。我的代码如下。任何帮助将不胜感激。
resource = [
"//cdn.rawgit.com/toorshia/justgage/master/raphael-2.1.4.min.js",
"//cdnjs.cloudflare.com/ajax/libs/justgage/1.2.8/justgage.js"
]
//add scripts to head
$.getScript(resource[0], function() {
$.getScript(resource[1], init)
})
var init = function() {
var g = new JustGage({
id: "gauge",
min: 0,
max: 100,
customSectors: [{
"lo": 0,
"hi": 89.999,
"color": "#f05050"
},
{
"lo": 90,
"hi": 92.999,
"color": "#DD7502"
},
{
"lo": 93,
"hi": 100,
"color": "#41c572"
}
],
levelColorsGradient: false
});
//refresh gauge when calcvalue changes
$(calcValue).on('DOMSubtreeModified', function() {
g.refresh($(this).text())
})
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id=calcValue><SpotfireControl id="3321e4c9003142ad83fdb753e6f66605" />
</span>
<DIV id=gauge></DIV>
&#13;
答案 0 :(得分:0)
我查看了这些例子,它应该是:
resource = [
"//cdn.rawgit.com/toorshia/justgage/master/raphael-2.1.4.min.js",
"//cdnjs.cloudflare.com/ajax/libs/justgage/1.2.8/justgage.js"
]
//add scripts to head
$.getScript(resource[0], function() {
$.getScript(resource[1], init)
})
var init = function() {
var g = new JustGage({
id: "gauge",
min: 0,
max: 100,
customSectors: {ranges: [{
"lo": 0,
"hi": 89.999,
"color": "#f05050"
},
{
"lo": 90,
"hi": 92.999,
"color": "#DD7502"
},
{
"lo": 93,
"hi": 100,
"color": "#41c572"
}
]},
levelColorsGradient: false
});
//refresh gauge when calcvalue changes
//$(calcValue).on('DOMSubtreeModified', function() {
// g.refresh($(this).text())
//})
window.setInterval( () => {
g.refresh(Math.random()*100)
}, 1000)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id=calcValue><SpotfireControl id="3321e4c9003142ad83fdb753e6f66605" />
</span>
<DIV id=gauge></DIV>
答案 1 :(得分:0)
我们的JustGage设置略有不同,但是我们遇到了相同的计算问题,即在网络浏览器等上打开仪表板时却没有出现。
问题(至少我认为)是异步代码。 原始代码是这样的:
resource=[
"//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.4/raphael-min.js",
"//cdnjs.cloudflare.com/ajax/libs/justgage/1.2.9/justgage.js"
]
$.getScript(resource[0],function(){
$.getScript(resource[1],init3)
})
//init3 function generates the gauge chart
init3 =function(){
var g3 = new JustGage({
id: "gaugeIRF",
value: $('#calcValueIRF').text(),
min: 0,
max: 100,
levelColors : [ "#73CC06", "#dec121", "#dec121", "#bd5537" ],
levelColorsGradient: false,
symbol:'%',
pointer: true,
gaugeWidthScale: 0.6,
counter: true,
relativeGaugeSize: true,
title: "IRF Readmission Rate"
});
//refresh gauge when calcvalue changes
$('#calcValueIRF').on('DOMSubtreeModified',function(){
g3.refresh($(this).text())
})
}
init3函数将运行,并且当浏览器读取init3时,将计算CalcValue,但有可能init3将在CalcValue可以返回数字之前完成运行。这是异步的,并且两个过程的执行顺序不正确。这就是为什么在打开浏览器或返回仪表盘时,不会显示计算的原因。
解决方案是放置一个函数。函数中的函数按JavaScript的正确顺序运行。这是我的工作代码:
resource=[
"//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.4/raphael-min.js",
"//cdnjs.cloudflare.com/ajax/libs/justgage/1.2.9/justgage.js"
]
$.getScript(resource[0],function(){
$.getScript(resource[1],init3)
})
//new function to get the calculated value
function getValue3(){
var newValue = $('#calcValueIRF').text()
return newValue
}
init3 =function(){
var g3 = new JustGage({
id: "gaugeIRF",
value: getValue3(),
min: 0,
max: 100,
levelColors : [ "#73CC06", "#dec121", "#dec121", "#bd5537" ],
levelColorsGradient: false,
symbol:'%',
pointer: true,
gaugeWidthScale: 0.6,
counter: true,
relativeGaugeSize: true,
title: "IRF Readmission Rate"
});
//refresh gauge when calcvalue changes
$('#calcValueIRF').on('DOMSubtreeModified',function(){
g3.refresh($(this).text())
})
}