APEX 5: Comment modifier dynamiquement xml de graphique?

Question

Je suis en train de construire une application Apex avec quelques graphiques (html rendu barchart de l'assistant). Maintenant, je dois inclure deux caractéristiques importantes. Changez la couleur des barres en fonction de la valeur et ajoutez des étiquettes en haut ou après les barres. Je sais que ceci peut être réalisé en réglant l'option "Custom xml" sur YES et en éditant le xml. Le problème est que je n'ai pas été capable de l'éditer de manière dynamique.

J'ai essayé d'exécuter une fonction dans la zone xml, mais elle est interprétée comme une chaîne (je suppose que la zone est traitée comme un modèle). J'ai également essayé d'ajouter un élément, référence dans le xml et ajouter le texte généré à l'élément à travers un bloc PL/SQL, mais cela n'a pas fonctionné.

Answer 1

Je peux suggérer une solution basée sur la compréhension du format SVG. Voici un exemple: https://apex.oracle.com/pls/apex/f?p=34599:4 Il contient un graphique avec des barres et un bouton (To Red). L'action du bouton est Action dynamique, qui exécute un code javascript. Si vous cliquez sur le bouton, l'une des barres changera de couleur.

Comment ça marche? Les graphiques SVG fonctionnent de la même manière que HTML et CSS. Tag defs à l'intérieur de la balise svg contient une liste de styles, les balises g, path, rect et beaucoup d'autres contiennent des graphiques, qui peuvent utiliser des styles de la liste defs. Vous devez modifier la liste et les éléments graphiques defs prédéfinis.

Voici le code. Je ne suis pas un bon programmeur javascript, et, comme vous pouvez le voir, toutes les valeurs significatives sont codées en dur ici. Mais j'espère que l'idée est claire:

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

Dans les propriétés dynamiques d'action, vous pouvez définir la propriété Fire on page load - le code fonctionnera automatiquement après chargement de la page. Aussi dans le code javascript, vous pouvez obtenir des valeurs à partir des éléments, les mettre dans le tableau, etc