js/javascriptまたはjqueryを通してタイトル要素をSVG rectに追加しますか？

Question

OBIEEは、棒グラフを生成し、データラベルを次のように表示します。

部分コードです。私はそれぞれのrect要素にtooltipを追加したいと考えています。それぞれのデータラベルが表示され、各バーに表示されているデータラベルが隠されています。

次のことが<rect>などの間で<title><title>を追加する方法

1. に挑戦しています。 <rect><title></title></rect>
2. 動的に選択する必要があるのは、タイトルのそれぞれのデータラベルです。

私はJQueryまたはJavscriptにあまり慣れておらず、解決策を選ぶことができません。動的なコードを探してい

ラインバーチャート

コードを見つける：あなたは、非カスタムの可視化のために行きたい場合は

<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

次のjQueryは、棒グラフにツールチップを追加していました。バーのテキストが順番に並んでいないので、私は別々にツールチップを追加しました。既存のグラフの上にラッパーコード（静的ビューにはHTMLが含まれています）だけでなく、標準コードを実際に変更する必要はありません。

ページリフレッシュが発生したときに不要な追加を避けるために、これには変異オブザーバが必要です。

//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

を本当に非カスタムビジュアル化のために行くに。

JETやD3jsなどを使用しますが、既存のチャートエンジンをハックしないでください。

標準を参照してください。スタンダードを台無しにしないでください。それは本当に悪い考えです。