【问题标题】:How to assign colors to table cells depending on their values in Spotfire如何根据 Spotfire 中的值为表格单元格分配颜色
【发布时间】:2019-11-13 06:20:30
【问题描述】:

Spotfire

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

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

45</TD>

颜色规则如下。

红色=产量≧50

黄色= 50>产量≧30

绿色=生产<40

有什么想法吗?

提前感谢您的支持。

【问题讨论】:

  • 标题与问题不正确匹配。您在问如何动态地为表格单元格分配颜色。我认为帖子的更准确的标题是“如何根据表格单元格的值为其分配颜色”
  • 如果您手动创建表格,您只需将具有颜色名称的类分配给每个单元格。并通过 css 为相应的类分配颜色。如果你不知道我所说的 class 或 css 是什么意思,你必须在开始之前学习一些基础知识。如果您正在动态创建表格(例如,通过 php 在服务器端或通过 javascript 在客户端,请告诉我们您是如何创建表格的,以便我们提供更集中的解决方案)
  • 我也建议只用 html、css 标记这个问题。 Spotfire 与问题无关
  • @Santi Spotfire 确实与这个问题有关。 HTML/CSS/JS 在 Spotfire 中的工作方式虽然与 Web 应用程序非常相似,但在开发方面也可能有所不同。 Spotfire 应该保留一个标签,因为它是在 Spotfire 工具中创建的。 Natasha,你必须在 Spotfire 中使用 Javascript。我有一个我会去找的脚本,但是您可以将 ID 分配给计算的字段,然后按名称将这些字段传递给您实现此逻辑的 JS。然后,您将使用MutationObserver 随时刷新值更改。
  • @MarkP。感谢回复。如果您能分享一些示例脚本,我将不胜感激。希望尽快收到您的来信。

标签: javascript html textarea spotfire


【解决方案1】:

我将分享我的示例是如何设置的。它可能与您的不同,但应作为指导。在我的示例中,我的 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 文件,我无法为您完全定制它。希望这有助于制定一个流程!

【讨论】:

    【解决方案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>

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-08-15
      • 2021-03-23
      • 1970-01-01
      相关资源
      最近更新 更多