Spotfire Javascript 输出消失答案

【问题标题】：Spotfire Javascript Output DisappearedSpotfire Javascript 输出消失
【发布时间】：2017-07-19 00:04:22
【问题描述】：

我在 spotfire 文本区域中有一个小的 javascript。它按设计工作。我保存并关闭了spotfire。重新打开时根本不显示。我的代码如下。任何帮助将不胜感激。

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>

【问题讨论】：

例子也需要jquery
什么是init？
@epascarello 抱歉，我一直在尝试让它工作并将init = function() 更改为window.onload = function()
我尝试使用上面相同的代码和不同的值创建 3 个不同的图表。在 spotfire 中刷新浏览器时，我无法让它显示仪表的背景，但一切都搞砸了，请参阅 img
并且当您修复 init 和缺少的 jQuery 时，控制台会向您显示错误。关于渐变的一些东西......

标签： javascript html spotfire justgage

【解决方案1】：

我看了例子，应该是：

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>

【讨论】：

【解决方案2】：

我们的 JustGage 设置略有不同，但我们遇到了相同的计算问题，即在 Web 浏览器等上打开仪表板时未显示计算。

问题（至少我认为）是异步代码。原代码是这样的：

    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())
      })
    }

【讨论】：