APEX 5: Как редактировать динамическую диаграмму xml?

Question

Я создаю приложение Apex с несколькими диаграммами (html-рендеринга из мастера). Теперь я должен включить две важные функции. Измените цвет баров в зависимости от значения и включите некоторые надписи сверху или после баров. Я знаю, что этого можно добиться, установив для параметра «Пользовательский xml» значение «ДА» и отредактировав xml. Проблема в том, что я не смог изменить это динамически.

Я попытался выполнить функцию в области xml, но интерпретируется как строка (я думаю, что область рассматривается как шаблон). Я также попытался добавить элемент, ссылку на него в xml и добавить сгенерированный текст в элемент через блок PL/SQL, но это также не сработало.

Answer 1

Я могу предложить решение на основе понимания формата SVG. Вот пример: https://apex.oracle.com/pls/apex/f?p=34599:4 Он содержит диаграмму с барами и кнопкой (To Red). Действие кнопки - это динамическое действие, которое выполняет javascript-код. Если вы нажмете кнопку, один из баров изменит свой цвет.

Как это работает. Графики SVG работают так же, как HTML и CSS. Тег defs внутри тега svg содержит список стилей, тегов g, path, rect и многие другие содержат графики, которые могут использовать стили из списка defs. Вам необходимо изменить предопределенные списки и графические элементы defs.

Вот код. Я не хороший программист javascript, и, как вы можете видеть, все значимые значения здесь жестко закодированы. Но я надеюсь, что вся идея ясна:

// here we get defs list. Be careful if you have several charts on the page: 
var defs = document.getElementsByTagName("defs")[0]; 

// here we get one of color styles: 
var grad1 = document.getElementById("#ac_linearGradient_75"); 

// make a copy of the style: 
var grad2 = grad1.cloneNode(true); 

// and change its ID: 
grad2.id = grad2.id + "_copy"; 

// then define new color: 
grad2.firstChild.setAttribute("style", "stop-color:rgb(209, 29, 29);stop-opacity:0.9"); 

// append to the defs list: 
defs.appendChild(grad2); 

// get one of bars by ID:  
var bar1 = document.getElementById("#ac_path_8o"); 

// set new filling style: 
bar1.setAttribute("fill", "url(##ac_linearGradient_75_copy)"); 

В свойствах динамического действия в можно установить свойство Fire on page load - код будет работать автоматически после загрузки страницы. Также в коде javascript вы можете получать значения из элементов, помещать их в диаграмму и т. Д.