Как назначить цвета ячейкам таблицы в зависимости от их значений в Spotfire - PullRequest
Новая
       21

Как назначить цвета ячейкам таблицы в зависимости от их значений в Spotfire

0 голосов
/ 02 июля 2019

Spotfire

Я создал кросс-таблицу в Spotfire, как показано ниже.

Я хочу создать ту же таблицу, используя HTML в текстовой области. Я создал таблицу и добавил значения, используя рассчитанные значения. Но я понятия не имею, как установить цвет фона динамически.

＜ TD style = "ВЫСОТА: 21px; WIDTH: 248px; PADDING-LEFT: 20px;" bgcolor = {Значение раскрывающегося списка или Расчетное значение}> 45 ＜ / TD ＞

Цветовые правила приведены ниже.

Красный = Производство ≧ 50

Желтый = 50 ＞ Производство ≧ 30

Зеленый = Производство ＜ 40

Есть идеи?

Спасибо за вашу поддержку заранее. enter image description here

1 Ответ

0 голосов
/ 03 июля 2019

Я поделюсь, как настроен мой пример. Это может отличаться от вашего, но должно действовать как руководство. В моем примере у меня есть HTML-блоки, которые должны переключаться между синим и желтым в зависимости от отсутствия или наличия отрицательного (-) знака.

Шаг первый - настроить CSS для его раскраски, как если бы данные были положительными (синий): 

.colorContainerBlue {background: #29A2EF;}

Шаг второй - установить мои вычисленные значения в их собственном div, который находится внутри родительского div "watcher". Это будет очень важно позже при настройке 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, я не могу полностью настроить это для вас. Надеюсь, это поможет изложить процесс для подражания!

...