Gibt es eine Möglichkeit, von außen auf den Tooltipp des dxCharts zuzugreifen?

Question

Lassen Sie mich versuchen, die technischen Einzelheiten des Problems zu erklären:

Ziel: Show kundenspezifischen Text auf Mausbewegung der Legende.

Ich habe ein DevExtreme jQuery chart für die ich Maus schweben

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" fill="none" stroke="none" stroke-width="0" class="dxc dxc-chart" style="line-height:normal;-ms-user-select:none;-moz-user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);display:block;overflow:hidden;touch-action:pan-x pan-y pinch-zoom;-ms-touch-action:pan-x pan-y pinch-zoom;" width="446" height="350" onclick="void(0)" direction="ltr"><defs><clipPath id="DevExpress_66"><rect x="0" y="0" width="446" height="345" transform="translate(0,0)"></rect></clipPath><pattern id="DevExpress_77" width="5" height="5" patternUnits="userSpaceOnUse"><rect x="0" y="0" width="5" height="5" transform="translate(0,0)" fill="#ffa500" opacity="0.75"></rect><path d="M 2.5 -2.5 L -2.5 2.5 M 0 5 L 5 0 M 7.5 2.5 L 2.5 7.5" stroke-width="2" stroke="#ffa500" transform="translate(0,0)"></path></pattern><pattern id="DevExpress_78" width="5" height="5" patternUnits="userSpaceOnUse"><rect x="0" y="0" width="5" height="5" transform="translate(0,0)" fill="#ffa500" opacity="0.5"></rect><path d="M 2.5 -2.5 L -2.5 2.5 M 0 5 L 5 0 M 7.5 2.5 L 2.5 7.5" stroke-width="2" stroke="#ffa500" transform="translate(0,0)"></path></pattern><pattern id="DevExpress_79" width="5" height="5" patternUnits="userSpaceOnUse"><rect x="0" y="0" width="5" height="5" transform="translate(0,0)" fill="red" opacity="0.75"></rect><path d="M 2.5 -2.5 L -2.5 2.5 M 0 5 L 5 0 M 7.5 2.5 L 2.5 7.5" stroke-width="2" stroke="red" transform="translate(0,0)"></path></pattern><pattern id="DevExpress_80" width="5" height="5" patternUnits="userSpaceOnUse"><rect x="0" y="0" width="5" height="5" transform="translate(0,0)" fill="red" opacity="0.5"></rect><path d="M 2.5 -2.5 L -2.5 2.5 M 0 5 L 5 0 M 7.5 2.5 L 2.5 7.5" stroke-width="2" stroke="red" transform="translate(0,0)"></path></pattern><pattern id="DevExpress_81" width="5" height="5" patternUnits="userSpaceOnUse"><rect x="0" y="0" width="5" height="5" transform="translate(0,0)" fill="green" opacity="0.75"></rect><path d="M 2.5 -2.5 L -2.5 2.5 M 0 5 L 5 0 M 7.5 2.5 L 2.5 7.5" stroke-width="2" stroke="green" transform="translate(0,0)"></path></pattern><pattern id="DevExpress_82" width="5" height="5" patternUnits="userSpaceOnUse"><rect x="0" y="0" width="5" height="5" transform="translate(0,0)" fill="green" opacity="0.5"></rect><path d="M 2.5 -2.5 L -2.5 2.5 M 0 5 L 5 0 M 7.5 2.5 L 2.5 7.5" stroke-width="2" stroke="green" transform="translate(0,0)"></path></pattern><pattern id="DevExpress_83" width="5" height="5" patternUnits="userSpaceOnUse"><rect x="0" y="0" width="5" height="5" transform="translate(0,0)" fill="blue" opacity="0.75"></rect><path d="M 2.5 -2.5 L -2.5 2.5 M 0 5 L 5 0 M 7.5 2.5 L 2.5 7.5" stroke-width="2" stroke="blue" transform="translate(0,0)"></path></pattern><pattern id="DevExpress_84" width="5" height="5" patternUnits="userSpaceOnUse"><rect x="0" y="0" width="5" height="5" transform="translate(0,0)" fill="blue" opacity="0.5"></rect><path d="M 2.5 -2.5 L -2.5 2.5 M 0 5 L 5 0 M 7.5 2.5 L 2.5 7.5" stroke-width="2" stroke="blue" transform="translate(0,0)"></path></pattern><pattern id="DevExpress_85" width="5" height="5" patternUnits="userSpaceOnUse"><rect x="0" y="0" width="5" height="5" transform="translate(0,0)" fill="#955f71" opacity="0.75"></rect><path d="M 2.5 -2.5 L -2.5 2.5 M 0 5 L 5 0 M 7.5 2.5 L 2.5 7.5" stroke-width="2" stroke="#955f71" transform="translate(0,0)"></path></pattern><pattern id="DevExpress_86" width="5" height="5" patternUnits="userSpaceOnUse"><rect x="0" y="0" width="5" height="5" transform="translate(0,0)" fill="#955f71" opacity="0.5"></rect><path d="M 2.5 -2.5 L -2.5 2.5 M 0 5 L 5 0 M 7.5 2.5 L 2.5 7.5" stroke-width="2" stroke="#955f71" transform="translate(0,0)"></path></pattern><clipPath id="DevExpress_87"><rect x="49" y="0" width="397" height="230" transform="translate(0,0)"></rect></clipPath><clipPath id="DevExpress_88"><rect x="49" y="0" width="397" height="230" transform="translate(0,0)"></rect></clipPath></defs><rect x="0" y="0" width="446" height="345" transform="translate(0,0)" fill="gray" opacity="0.0001"></rect><g class="dxc-background"></g><g class="dxc-strips-group"><g class="dxc-arg-strips" clip-path="url(#DevExpress_87)"></g><g class="dxc-val-strips" clip-path="url(#DevExpress_87)"></g></g><g class="dxc-grids-group"><g class="dxc-val-grid"><path d="M 49 230 L 446 230" transform="translate(0,0.5)" stroke="#d3d3d3" stroke-width="1"></path><path d="M 49 179 L 446 179" transform="translate(0,0.5)" stroke="#d3d3d3" stroke-width="1"></path><path d="M 49 128 L 446 128" transform="translate(0,0.5)" stroke="#d3d3d3" stroke-width="1"></path><path d="M 49 77 L 446 77" transform="translate(0,0.5)" stroke="#d3d3d3" stroke-width="1"></path><path d="M 49 26 L 446 26" transform="translate(0,0.5)" stroke="#d3d3d3" stroke-width="1"></path></g><g class="dxc-arg-grid"></g></g><g class="dxc-axes-group"><g class="dxc-arg-axis" clip-path="url(#DevExpress_66)"><g class="dxc-arg-elements"><text x="82" y="253" transform="translate(0,0)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="start"><tspan x="82" y="253">Jul</tspan><tspan x="82" dy="12">2015</tspan></text><text x="148" y="253" transform="translate(0,0)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="start"><tspan x="148" y="253">Aug</tspan><tspan x="148" dy="12">2015</tspan></text><text x="214" y="253" transform="translate(0,0)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="start"><tspan x="214" y="253">Sep</tspan><tspan x="214" dy="12">2015</tspan></text><text x="281" y="253" transform="translate(0,0)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="start"><tspan x="281" y="253">Oct</tspan><tspan x="281" dy="12">2015</tspan></text><text x="347" y="253" transform="translate(0,0)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="start"><tspan x="347" y="253">Nov</tspan><tspan x="347" dy="12">2015</tspan></text><text x="413" y="253" transform="translate(0,0)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="start"><tspan x="413" y="253">Dec</tspan><tspan x="413" dy="12">2015</tspan></text></g><g class="dxc-arg-line"></g><g class="dxc-arg-title"><text x="247.5" y="289" transform="translate(0,0)" style="fill:Gray;font-size:14px;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;cursor:default;" text-anchor="middle">Months</text></g></g><g class="dxc-val-axis" clip-path="url(#DevExpress_66)"><g class="dxc-val-elements"><text x="39" y="235" transform="translate(0,0)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="end">0</text><text x="39" y="184" transform="translate(0,0)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="end">10</text><text x="39" y="133" transform="translate(0,0)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="end">20</text><text x="39" y="82" transform="translate(0,0)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="end">30</text><text x="39" y="31" transform="translate(0,0)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="end">40</text></g><g class="dxc-val-line"></g><g class="dxc-val-title"><text x="15" y="115" transform="translate(0,0) rotate(270,15,115)" style="fill:Gray;font-size:14px;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;cursor:default;" text-anchor="middle">Days</text></g></g></g><g class="dxc-constant-lines-group"><g class="dxc-arg-constant-lines"></g><g class="dxc-val-constant-lines"></g></g><g class="dxc-strips-labels-group"><g class="dxc-arg-axis-labels"></g><g class="dxc-val-axis-labels"></g></g><g class="dxc-border"></g><g class="dxc-series-group"><g class="dxc-series"><g class="dxc-elements" stroke="#ffa500" stroke-width="2" clip-path="url(#DevExpress_88)"><path d="M 82 133 L 148 132 L 214 136 L 281 136 L 347 36 L 413 41" transform="translate(0,0)" stroke-width="2"></path></g><g fill="#ffa500" stroke="#ffa500" stroke-width="0" r="6" visibility="visible" class="dxc-markers" opacity="1" clip-path=""><circle cx="0" cy="0" r="6" stroke-width="0" transform="translate(82,133)"></circle><circle cx="0" cy="0" r="6" stroke-width="0" transform="translate(148,132)"></circle><circle cx="0" cy="0" r="6" stroke-width="0" transform="translate(214,136)"></circle><circle cx="0" cy="0" r="6" stroke-width="0" transform="translate(281,136)"></circle><circle cx="0" cy="0" r="6" stroke-width="0" transform="translate(347,36)"></circle><circle cx="0" cy="0" r="6" stroke-width="0" transform="translate(413,41)"></circle></g><g fill="gray" opacity="0.001" stroke="gray" class="dxc-trackers" clip-path="url(#DevExpress_88)"><path d="M 82 133 L 148 132 L 214 136 L 281 136 L 347 36 L 413 41" transform="translate(0,0)" stroke-width="12" fill="none"></path></g></g><g class="dxc-series"><g class="dxc-elements" stroke="red" stroke-width="2" clip-path="url(#DevExpress_88)"><path d="M 82 173 L 148 182 L 214 177 L 281 177 L 347 171 L 413 170" transform="translate(0,0)" stroke-width="2"></path></g><g fill="red" stroke="red" stroke-width="0" r="6" visibility="visible" class="dxc-markers" opacity="1" clip-path=""><circle cx="0" cy="0" r="6" stroke-width="0" transform="translate(82,173)"></circle><circle cx="0" cy="0" r="6" stroke-width="0" transform="translate(148,182)"></circle><circle cx="0" cy="0" r="6" stroke-width="0" transform="translate(214,177)"></circle><circle cx="0" cy="0" r="6" stroke-width="0" transform="translate(281,177)"></circle><circle cx="0" cy="0" r="6" stroke-width="0" transform="translate(347,171)"></circle><circle cx="0" cy="0" r="6" stroke-width="0" transform="translate(413,170)"></circle></g><g fill="gray" opacity="0.001" stroke="gray" class="dxc-trackers" clip-path="url(#DevExpress_88)"><path d="M 82 173 L 148 182 L 214 177 L 281 177 L 347 171 L 413 170" transform="translate(0,0)" stroke-width="12" fill="none"></path></g></g><g class="dxc-series"><g class="dxc-elements" stroke="green" stroke-width="2" clip-path="url(#DevExpress_88)"><path d="M 82 141 L 148 139 L 214 129 L 281 138 L 347 103 L 413 134" transform="translate(0,0)" stroke-width="2"></path></g><g fill="green" stroke="green" stroke-width="0" r="6" visibility="visible" class="dxc-markers" opacity="1" clip-path=""><circle cx="0" cy="0" r="6" stroke-width="0" transform="translate(82,141)"></circle><circle cx="0" cy="0" r="6" stroke-width="0" transform="translate(148,139)"></circle><circle cx="0" cy="0" r="6" stroke-width="0" transform="translate(214,129)"></circle><circle cx="0" cy="0" r="6" stroke-width="0" transform="translate(281,138)"></circle><circle cx="0" cy="0" r="6" stroke-width="0" transform="translate(347,103)"></circle><circle cx="0" cy="0" r="6" stroke-width="0" transform="translate(413,134)"></circle></g><g fill="gray" opacity="0.001" stroke="gray" class="dxc-trackers" clip-path="url(#DevExpress_88)"><path d="M 82 141 L 148 139 L 214 129 L 281 138 L 347 103 L 413 134" transform="translate(0,0)" stroke-width="12" fill="none"></path></g></g><g class="dxc-series"><g class="dxc-elements" stroke="blue" stroke-width="2" clip-path="url(#DevExpress_88)"><path d="M 82 135 L 148 139 L 214 136 L 281 136 L 347 136 L 413 32" transform="translate(0,0)" stroke-width="2"></path></g><g fill="blue" stroke="blue" stroke-width="0" r="6" visibility="visible" class="dxc-markers" opacity="1" clip-path=""><circle cx="0" cy="0" r="6" stroke-width="0" transform="translate(82,135)"></circle><circle cx="0" cy="0" r="6" stroke-width="0" transform="translate(148,139)"></circle><circle cx="0" cy="0" r="6" stroke-width="0" transform="translate(214,136)"></circle><circle cx="0" cy="0" r="6" stroke-width="0" transform="translate(281,136)"></circle><circle cx="0" cy="0" r="6" stroke-width="0" transform="translate(347,136)"></circle><circle cx="0" cy="0" r="6" stroke-width="0" transform="translate(413,32)"></circle></g><g fill="gray" opacity="0.001" stroke="gray" class="dxc-trackers" clip-path="url(#DevExpress_88)"><path d="M 82 135 L 148 139 L 214 136 L 281 136 L 347 136 L 413 32" transform="translate(0,0)" stroke-width="12" fill="none"></path></g></g><g class="dxc-series"><g class="dxc-elements" stroke="#955f71" stroke-width="2" clip-path="url(#DevExpress_88)"><path d="M 82 141 L 148 143 L 214 145 L 281 138 L 347 137 L 413 140" transform="translate(0,0)" stroke-width="2"></path></g><g fill="#955f71" stroke="#955f71" stroke-width="0" r="6" visibility="visible" class="dxc-markers" opacity="1" clip-path=""><circle cx="0" cy="0" r="6" stroke-width="0" transform="translate(82,141)"></circle><circle cx="0" cy="0" r="6" stroke-width="0" transform="translate(148,143)"></circle><circle cx="0" cy="0" r="6" stroke-width="0" transform="translate(214,145)"></circle><circle cx="0" cy="0" r="6" stroke-width="0" transform="translate(281,138)"></circle><circle cx="0" cy="0" r="6" stroke-width="0" transform="translate(347,137)"></circle><circle cx="0" cy="0" r="6" stroke-width="0" transform="translate(413,140)"></circle></g><g fill="gray" opacity="0.001" stroke="gray" class="dxc-trackers" clip-path="url(#DevExpress_88)"><path d="M 82 141 L 148 143 L 214 145 L 281 138 L 347 137 L 413 140" transform="translate(0,0)" stroke-width="12" fill="none"></path></g></g></g><g class="dxc-labels-group"><g class="dxc-labels" clip-path="url(#DevExpress_88)" opacity="1" transform="translate(0,0)"></g><g class="dxc-labels" clip-path="url(#DevExpress_88)" opacity="1" transform="translate(0,0)"></g><g class="dxc-labels" clip-path="url(#DevExpress_88)" opacity="1" transform="translate(0,0)"></g><g class="dxc-labels" clip-path="url(#DevExpress_88)" opacity="1" transform="translate(0,0)"></g><g class="dxc-labels" clip-path="url(#DevExpress_88)" opacity="1" transform="translate(0,0)"></g></g><g class="dxc-crosshair-cursor"></g><g class="dxc-legend" clip-path="url(#DevExpress_66)" transform="translate(0,0)"><g transform="translate(105,303)"><rect x="0" y="0" width="12" height="12" transform="translate(5,0)" fill="#ffa500" aria-describedby="97b142ed-caf7-4617-68d7-f34ed9a0ec27"></rect><text x="0" y="0" transform="translate(11,29)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="middle" title="AET">AET</text><rect x="0" y="0" width="12" height="12" transform="translate(51,0)" fill="red" aria-describedby="456ea7c6-7ff1-4d4a-22c1-2ebe97b7a184"></rect><text x="0" y="0" transform="translate(57,29)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="middle" title="BLTX">BLTX</text><rect x="0" y="0" width="12" height="12" transform="translate(103,0)" fill="green" aria-describedby="d134e27b-d152-d4db-bb3c-98bac2226892"></rect><text x="0" y="0" transform="translate(109,29)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="middle" title="MSCT">MSCT</text><rect x="0" y="0" width="12" height="12" transform="translate(158,0)" fill="blue" aria-describedby="de338510-8bbd-a2d4-23d3-77cbd2f5366e"></rect><text x="0" y="0" transform="translate(164,29)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="middle" title="NOSO">NOSO</text><rect x="0" y="0" width="12" height="12" transform="translate(213,0)" fill="#955f71" aria-describedby="585db841-08fd-54c7-3baf-5831c993b4a6"></rect><text x="0" y="0" transform="translate(219,29)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="middle" title="UHCR">UHCR</text></g></g></svg>

Ich bin erfolgreich in der Lage die Werkzeugspitze zeigen, einige benutzerdefinierte Text in der dxTooltip auf Legende zeigen, müssen mit benutzerdefinierten Text auf Punkt Maus Hover durch Manipulieren onTooltipShown event. Auch this Google search result ist nicht was wir brauchen.

  onTooltipShown: function (e) { 
       var marker = e.target; 
       $(".tooltip-container").html("Argument: "+marker.argument + "<br/>Series name:" + GetFullSeriesName(marker.series.name) + "<br/>Value: " + parseInt(marker.value) + "<br/>Tag: " + marker.tag) 
      } 

Ich bin versucht dxTooltip control für Legende Mausbewegung verwendet:

function ShowFullPayerName() { 
var PayerLegendBoxes = $("#chartContainer4 .dxc-legend g rect"); 
var PayerLegends = $("#chartContainer4 .dxc-legend g text"); 
var chart = $("#chartContainer4").dxChart(); 

PayerLegendBoxes.each(function() { 

    var nextElementHTML = this.nextSibling.innerHTML; 
    var currElementTip = nextElementHTML + "tip"; 
    var currElement = this; 

    var title = chart.append("<span id=" + currElementTip + ">" + nextElementHTML + "</span>"); 

    var tooltipSimple = $("#" + currElementTip).dxTooltip({ 
     target: currElement, 
     content:"test" 
    }).dxTooltip("instance"); 

    $(currElement).unbind().hover(function() { tooltipSimple.toggle() }); 

}); 

PayerLegends.each(function() { 
    var title = $(this).attr("title", this.innerHTML); 
}); 
} 

Ich bin nicht in der Lage, einen Weg zu finden, um dxChart's tool tip Zugriff von außen.

Gibt es eine Möglichkeit, von außen auf die dxChart's tool tip zuzugreifen? (Vielleicht innerhalb dxTooltip control)

Answer 1

Sie Diagramm tooltip option ändern können:

var chartInstance = $("#chartContainer4").dxChart("instance"); 
var tooltip = chartInstance.option("tooltip"); 
tooltip.color = "red"; 
chartInstance.option("tooltip", tooltip);