如何根据Spotfire中的值为表格单元格分配颜色

Question

Spotfire

我在Spotfire中创建了一个交叉表，如下所示。

我想在文本区域中使用html创建相同的表。 我创建了表格并使用计算值添加了值。但是我不知道如何动态设置背景颜色。

  

＜TD style =“ HEIGHT：21px； WIDTH：248px； PADDING-LEFT：20px；” bgcolor = {下拉列表值或计算值}> 45 ＜/ TD＞

颜色规则如下。

红色=产量≧50

黄色= 50＞产量≧30

绿色=生产量<40

有什么想法吗？

谢谢您的支持。

Answer 1

我将分享我的示例的设置方式。它可能与您的有所不同，但应作为指导。在我的示例中，我有一些HTML框，需要根据是否存在负号（-）在蓝色和黄色之间切换。

第一步是设置一些CSS来为其着色，就好像数据是正的（蓝色）：

.colorContainerBlue {background: #29A2EF;}

第二步是在父“观察者” 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文件，我将无法为您完全自定义此文件。希望这有助于制定一个遵循的程序！

Answer 2

如果您要用颜色填充多行和多个单元格，则可以执行以下示例

function refreshWidth() {

    $('#table_id td.y_n').each(function(){
        if ($(this).text() == 'N') {
            $(this).css('background-color','#f00');
        }
        else if ($(this).text() == 'Y') {
            $(this).css('background-color','green');
        }
    });
}

//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);

<div id="watcher">

<table id="table_id">
 <tr><th>Question</th><th>Y/N?</th></tr>
 <tr><td>I am me.</td><td class="y_n"><SpotfireControl id="2bb8174ce9a8465a84be2ef7c0eb2797" /></td></tr>
 <tr><td>I am him.</td><td class="y_n"><SpotfireControl id="9ef686aa45d847ee98fafb94c7dfe880" /></td></tr>
 <tr><td>I am not sure.</td><td class="y_n"><SpotfireControl id="e8ceaec4965c480587bbf352e46e7d2a" /></td></tr>
 <tr><td>This is a table.</td><td class="y_n"><SpotfireControl id="67b9c407bef24eb888ece4875b5807c2" /></td></tr>

</table>

</div>