Ajouter un élément de titre à SVG rect via js/javascript ou jquery?

Question

OBIEE génère un graphique à barres linéaires et affiche les étiquettes de données comme suit:

Il s'agit d'un code partiel. Je cherche à ajouter tooltip sur chaque élément rect à partir de Il est des étiquettes de données respectives montrées et masquer l'étiquette de données montrée sur chaque barre.

Après les choses difficiles

1. Comment ajouter <title><title> entre <rect> par exemple. <rect><title></title></rect>
2. Vous devez sélectionner dynamiquement les étiquettes de données respectives pour le titre.

Je ne suis pas familier avec beaucoup JQuery ou Javscript et en mesure de choisir votre solution. Vous recherchez un code dynamique

ligne Bar Chart

trouver le code:

<svg viewBox="0 -1 583 169"> 
 
<g> 
 
    <g> 
 
    <rect fill="#ffffff" x="0" y="0" width="583" height="168" aria-hidden="true" fill-opacity="0" pointer-events="visiblePainted"></rect> 
 
    <rect fill="none" x="50" y="7" width="523" height="76" aria-hidden="true" fill-opacity="0" pointer-events="visiblePainted" shape-rendering="crispEdges"></rect><text fill="#333333" x="93" y="113" font-family="Courier New" aria-hidden="true" fill-opacity="1" font-size="9" transform="rotate(315 115,109)" pointer-events="visiblePainted">31-Dec-15</text><text fill="#333333" x="224" y="113" font-family="Courier New" 
 
     aria-hidden="true" fill-opacity="1" font-size="9" transform="rotate(315 246,109)" pointer-events="visiblePainted">31-Dec-16</text><text fill="#333333" x="354.5" y="113" font-family="Courier New" aria-hidden="true" fill-opacity="1" font-size="9" transform="rotate(315 377,109)" 
 
     pointer-events="visiblePainted">28-Feb-17</text><text fill="#333333" x="485.5" y="113" font-family="Courier New" aria-hidden="true" fill-opacity="1" font-size="9" transform="rotate(315 508,109)" pointer-events="visiblePainted">16-Apr-17</text> 
 
    <text 
 
     fill="#333333" x="39" y="86" font-family="tahoma, sans-serif" aria-hidden="true" fill-opacity="1" font-size="11" transform="matrix(1,0,0,1,0,0)" pointer-events="visiblePainted">0</text><text fill="#333333" x="18" y="73" font-family="tahoma, sans-serif" aria-hidden="true" fill-opacity="1" font-size="11" transform="matrix(1,0,0,1,0,0)" pointer-events="visiblePainted">4,000</text><text fill="#333333" x="18" y="61" font-family="tahoma, sans-serif" 
 
     aria-hidden="true" fill-opacity="1" font-size="11" transform="matrix(1,0,0,1,0,0)" pointer-events="visiblePainted">8,000</text><text fill="#333333" x="12" y="48" font-family="tahoma, sans-serif" aria-hidden="true" fill-opacity="1" font-size="11" 
 
     transform="matrix(1,0,0,1,0,0)" pointer-events="visiblePainted">12,000</text><text fill="#333333" x="12" y="36" font-family="tahoma, sans-serif" aria-hidden="true" fill-opacity="1" font-size="11" transform="matrix(1,0,0,1,0,0)" pointer-events="visiblePainted">16,000</text> 
 
     <text 
 
     fill="#333333" x="12" y="23" font-family="tahoma, sans-serif" aria-hidden="true" fill-opacity="1" font-size="11" transform="matrix(1,0,0,1,0,0)" pointer-events="visiblePainted">20,000</text><text fill="#333333" x="12" y="10" font-family="tahoma, sans-serif" aria-hidden="true" fill-opacity="1" font-size="11" transform="matrix(1,0,0,1,0,0)" pointer-events="visiblePainted">24,000</text> 
 
     <line fill="none" x1="50" y1="83" x2="573" 
 
      y2="83" aria-hidden="true" fill-opacity="0" pointer-events="visiblePainted" stroke="#9e9e9e" stroke-opacity="1" stroke-width="1" stroke-linecap="round" shape-rendering="crispEdges"></line> 
 
     <line fill="none" x1="50" y1="83" x2="50" y2="7" aria-hidden="true" fill-opacity="0" pointer-events="visiblePainted" stroke="#9e9e9e" stroke-opacity="1" stroke-width="1" stroke-linecap="round" shape-rendering="crispEdges"></line> 
 
     <rect fill="#2e87c1" x="66" y="66" width="49" height="17" aria-hidden="true" fill-opacity="1" pointer-events="visiblePainted" cursor="pointer"></rect> 
 
     <rect fill="#7dc25b" x="115" y="39" width="49" height="44" aria-hidden="true" fill-opacity="1" pointer-events="visiblePainted" cursor="pointer"></rect> 
 
     <rect fill="#2e87c1" x="197" y="81" width="49" height="2" aria-hidden="true" fill-opacity="1" pointer-events="visiblePainted" cursor="pointer"></rect> 
 
     <rect fill="#7dc25b" x="246" y="76" width="49" height="7" aria-hidden="true" fill-opacity="1" pointer-events="visiblePainted" cursor="pointer"></rect> 
 
     <rect fill="#2e87c1" x="328" y="67" width="49" height="16" aria-hidden="true" fill-opacity="1" pointer-events="visiblePainted" cursor="pointer"></rect> 
 
     <rect fill="#7dc25b" x="377" y="33" width="49" height="50" aria-hidden="true" fill-opacity="1" pointer-events="visiblePainted" cursor="pointer"></rect> 
 
     <rect fill="#2e87c1" x="459" y="67" width="49" height="16" aria-hidden="true" fill-opacity="1" pointer-events="visiblePainted" cursor="pointer"></rect> 
 
     <rect fill="#7dc25b" x="508" y="33" width="49" height="50" aria-hidden="true" fill-opacity="1" pointer-events="visiblePainted" cursor="pointer"></rect> 
 
     <polyline fill="none" points="115 23 246 74 377 17 508 17" aria-hidden="true" pointer-events="visiblePainted" stroke="#99ccff" stroke-opacity="1" stroke-width="3" stroke-linejoin="round" clip-path="url(#plotAreaClip_sawc_3x4$cp3)"></polyline> 
 
     <ellipse fill="#99ccff" aria-hidden="true" cx="115" cy="23" rx="3" ry="3" fill-opacity="1" pointer-events="visiblePainted" cursor="pointer"></ellipse> 
 
     <ellipse fill="#99ccff" aria-hidden="true" cx="246" cy="74" rx="3" ry="3" cursor="pointer" pointer-events="visiblePainted" fill-opacity="1"></ellipse> 
 
     <ellipse fill="#99ccff" aria-hidden="true" cx="377" cy="17" rx="3" ry="3" cursor="pointer" pointer-events="visiblePainted" fill-opacity="1"></ellipse> 
 
     <ellipse fill="#99ccff" aria-hidden="true" cx="508" cy="17" rx="3" ry="3" cursor="pointer" pointer-events="visiblePainted" fill-opacity="1"></ellipse><text fill="#3b3b3b" x="72.5" y="67" font-family="tahoma, sans-serif" aria-hidden="true" fill-opacity="1" font-size="11" transform="matrix(1,0,0,1,0,0)" pointer-events="visiblePainted" cursor="pointer">5,083.3</text><text fill="#3b3b3b" 
 
      x="208" y="81" font-family="tahoma, sans-serif" aria-hidden="true" fill-opacity="1" font-size="11" transform="matrix(1,0,0,1,0,0)" pointer-events="visiblePainted" cursor="pointer">634.5</text><text fill="#3b3b3b" x="333.5" y="67" font-family="tahoma, sans-serif" 
 
      aria-hidden="true" fill-opacity="1" font-size="11" transform="matrix(1,0,0,1,0,0)" pointer-events="visiblePainted" cursor="pointer">5,047.0</text><text fill="#3b3b3b" x="464.5" y="67" font-family="tahoma, sans-serif" aria-hidden="true" fill-opacity="1" 
 
      font-size="11" transform="matrix(1,0,0,1,0,0)" pointer-events="visiblePainted" cursor="pointer">5,047.0</text><text fill="#3b3b3b" x="119" y="39" font-family="tahoma, sans-serif" aria-hidden="true" fill-opacity="1" font-size="11" transform="matrix(1,0,0,1,0,0)" 
 
      pointer-events="visiblePainted" cursor="pointer">13,675.4</text><text fill="#3b3b3b" x="252.5" y="76" font-family="tahoma, sans-serif" aria-hidden="true" fill-opacity="1" font-size="11" transform="matrix(1,0,0,1,0,0)" pointer-events="visiblePainted" 
 
      cursor="pointer">1,946.1</text><text fill="#3b3b3b" x="380" y="33" font-family="tahoma, sans-serif" aria-hidden="true" fill-opacity="1" font-size="11" transform="matrix(1,0,0,1,0,0)" pointer-events="visiblePainted" cursor="pointer">15,606.2</text> 
 
     <text 
 
      fill="#3b3b3b" x="511" y="33" font-family="tahoma, sans-serif" aria-hidden="true" fill-opacity="1" font-size="11" transform="matrix(1,0,0,1,0,0)" pointer-events="visiblePainted" cursor="pointer">15,606.2</text><text fill="#3b3b3b" x="98.5" y="23" font-family="tahoma, sans-serif" aria-hidden="true" fill-opacity="1" font-size="11" transform="matrix(1,0,0,1,0,0)" pointer-events="visiblePainted">18,759</text><text fill="#3b3b3b" x="232" y="74" 
 
      font-family="tahoma, sans-serif" aria-hidden="true" fill-opacity="1" font-size="11" transform="matrix(1,0,0,1,0,0)" pointer-events="visiblePainted">2,581</text><text fill="#3b3b3b" x="360.5" y="17" font-family="tahoma, sans-serif" aria-hidden="true" 
 
      fill-opacity="1" font-size="11" transform="matrix(1,0,0,1,0,0)" pointer-events="visiblePainted">20,653</text><text fill="#3b3b3b" x="491.5" y="17" font-family="tahoma, sans-serif" aria-hidden="true" fill-opacity="1" font-size="11" transform="matrix(1,0,0,1,0,0)" 
 
      pointer-events="visiblePainted">20,653</text> 
 
      <rect fill="none" x="98" y="149" width="387" height="13" aria-hidden="true" fill-opacity="0" stroke="#ffffff" stroke-opacity="0" stroke-width="1" pointer-events="visiblePainted" shape-rendering="crispEdges"></rect> 
 
      <rect fill="#2e87c1" aria-hidden="true" x="102" y="151" width="10" height="10" fill-opacity="1" pointer-events="visiblePainted"></rect> 
 
      <rect fill="#7dc25b" aria-hidden="true" x="228" y="151" width="10" height="10" fill-opacity="1" pointer-events="visiblePainted"></rect> 
 
      <line fill="#7dc25b" x1="355" y1="156" x2="364" y2="156" aria-hidden="true" fill-opacity="1" pointer-events="visiblePainted" stroke="#99ccff" stroke-opacity="1" stroke-width="2"></line> 
 
      <ellipse fill="#99ccff" aria-hidden="true" cx="360" cy="156" rx="3" ry="3" fill-opacity="1" pointer-events="visiblePainted"></ellipse><text fill="#333333" x="115" y="159" font-family="Arial" aria-hidden="true" fill-opacity="1" font-size="11" transform="matrix(1,0,0,1,0,0)" pointer-events="visiblePainted">Category1</text><text fill="#333333" x="242" y="159" font-family="Arial" 
 
      aria-hidden="true" fill-opacity="1" font-size="11" transform="matrix(1,0,0,1,0,0)" pointer-events="visiblePainted">Category2</text><text fill="#333333" x="368" y="159" font-family="Arial" aria-hidden="true" fill-opacity="1" font-size="11" transform="matrix(1,0,0,1,0,0)" 
 
      pointer-events="visiblePainted">Overall Category</text></g> 
 
</g> 
 
</svg>

Answer 1

Le fichier jQuery suivant permet d'ajouter une info-bulle aux graphiques à barres. Comme le texte sur la barre n'est pas en séquence, j'ai suivi l'ajout d'une info-bulle séparément. Nous n'avons pas vraiment besoin de changer le code standard au lieu d'un code d'emballage (l'affichage statique contient html) en haut du graphique existant.

Ceci devrait avoir un observateur de mutation pour éviter une addition inutile lors de l'actualisation de la page.

//Adding tooltip for Green color rect 
 

 
$.each(
 

 
$('svg g g > rect[fill="#2e87c1"]:nth-of-type(odd)') , function(key, value) 
 
{ 
 

 
    var iter = key; 
 
    var titleforrect = document.createElementNS("http://www.w3.org/2000/svg","title") 
 
    
 
    var objText = $('svg g g > text[fill="#3b3b3b"]'); 
 
    var szText = objText.length; 
 
    var szTextSet = szText/3; 
 
    
 
    var datalabel = objText.slice(0,szText-szTextSet).eq(iter).text(); 
 
    
 
    //console.log(datalabel); 
 
    
 
    titleforrect.textContent = datalabel 
 
    
 
    value.append(titleforrect); 
 
} 
 
    
 
); 
 

 
// Adding tooltip for Green color rect 
 
$.each(
 

 
$('svg g g > rect[fill="#7dc25b"]:nth-of-type(even)') , function(key, value) 
 
{ 
 

 
    var iter = $('svg g g > rect[fill="#7dc25b"]:nth-of-type(even)').length + key; 
 
    var titleforrect = document.createElementNS("http://www.w3.org/2000/svg","title") 
 
    
 
    var objText = $('svg g g > text[fill="#3b3b3b"]'); 
 
    var szText = objText.length; 
 
    var szTextSet = szText/3; 
 
    
 
    var datalabel = objText.slice(0,szText-szTextSet).eq(iter).text(); 
 
    
 
    //console.log(datalabel); 
 
    
 
    titleforrect.textContent = datalabel 
 
    
 
    value.append(titleforrect); 
 
} 
 
    
 
);

Answer 2

Si vous voulez aller pour la visualisation non personnalisée, puis vraiment aller pour visualizati non personnalisé sur.

Utilisez JET ou D3js ou autres, mais n'essayez pas de pirater le moteur de cartographie existant.

Personnalisez ou utilisez la norme. Ne pas gâcher la norme. C'est une très mauvaise idée.