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

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

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


xml charts oracle-apex-5
person Alexsen    schedule 02.12.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я могу предложить решение, основанное на понимании формата 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)");

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

person Dmitriy    schedule 03.12.2016
comment
Спасибо за ответ, буду разбираться. Я думаю, вы также можете добавить некоторые метки к диаграмме. - person Alexsen; 05.12.2016
comment
@Alexsen Alexsen Я до сих пор не знаю, как AnyChart добавляет текст в диаграмму. Но вы можете добавить текст, используя тег text. Подробнее см. здесь: w3schools.com/graphics/svg_text.asp - person Dmitriy; 05.12.2016
comment
Ну, я не могу получить какую-либо полосу из html-документа, потому что единственный тег, который у них есть, - это класс, а в имени есть пробел, поэтому я не могу получить элемент. Это была хорошая идея, она не сработала для меня, но может сработать для других. - person Alexsen; 06.12.2016
comment
@Alexsen В именах классов не может быть пробелов. Если вы видите пробелы, это два (или более) класса. В любом случае, если вы хотите попробовать этот способ, вам следует создать еще один вопрос об этой новой проблеме. Я новичок в HTML/CSS/javascript/SVG, знаю всего несколько приемов. - person Dmitriy; 06.12.2016