我将分享我的示例是如何设置的。它可能与您的不同,但应作为指导。在我的示例中,我的 HTML 框需要根据是否存在负 (-) 符号在蓝色和黄色之间切换。
第一步是设置一些 CSS 来为它着色,就好像数据是正数(蓝色):
.colorContainerBlue {background: #29A2EF;}
第二步是在他们自己的 div 中设置我的计算值,该 div 位于父“观察者”div 内。这在以后设置MutationObserver()时非常重要:
<!-- Watch for any changes within this div using JS MutationObserver -->
<div id="watcher">
<!-- measure 1 -->
<div id="measure1" style="display:none">
<SpotfireControl id="your_id_here" />
</div>
</div>
第三步是设置你的 HTML 元素来保存这个值。在我的情况下,它是一堆flexboxes,但在你的情况下,它只是一个 HTML 表格。所以在我的代码中是这样的:
<li class="colorContainerBlue valueReturnedFromJS"></li>
现在魔法来了。 第四步是建立一个JS文件,把上面第二步计算出来的值拉进去,看一下,相应地改变类的颜色,然后把它传回表格,一直仅在计算值发生变化时运行。在我的示例中,这是通过以下方式实现的:
function refreshWidth() {
//measure1
//get values from HTML
MeasureOne = document.getElementById('measure1');
MeasureOneValue= MeasureOne.innerText;
//check for negatives and change background colors (looking for negative sign).
if (MeasureOneValue.indexOf("-") != -1) {
document.getElementsByClassName('colorContainerBlue')[0].style.background = "#FFDB4A";
}
else {
document.getElementsByClassName('colorContainerBlue')[0].style.background = "#29A2EF";
}
//return value to HTML
document.getElementsByClassName('valueReturnedFromJS')[0].innerHTML = MeasureOneValue;
}
//MutationObserver to refresh when needed. Works better than running every second as that causes issues with exporting in newer versions of Spotfire
var target = document.getElementById('watcher');
var observer = new MutationObserver(refreshWidth);
var config = { attributes: true, childList: true, characterData: true, subtree: true};
observer.observe(target, config);
如果您的所有命名都正确,并且您在 JS 文件中获得了正确的 if else 语句,那么这应该可以对您的确切示例进行一些调整。如果不使用您的确切 ..dxp 文件,我无法为您完全定制它。希望这有助于制定一个流程!