通过js/javascript或jquery向SVG rect添加title元素？

Question

OBIEE 生成折线图并显示如下数据标签

这是部分代码。我正在寻找在每个 rect 元素上添加 tooltip 它是显示的相应数据标签并隐藏每个栏上显示的数据标签。

以下事情具有挑战性

如何在 <rect> 之间添加 <title><title> 例如。 <rect><title></title></rect>
需要动态选择是标题各自的数据标签。

我对 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

如果您想使用非自定义可视化，那么就真正选择非自定义可视化。

使用 JET 或 D3js 等，但不要尝试破解现有的图表引擎。

定制或使用标准。不要乱了标准。这真是个坏主意。

Answer 2

以下 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);
}
  
);

通过js/javascript或jquery向SVG rect添加title元素？

Add title element to SVG rect through js/javascript or jquery?

svg

title

rect

obiee