javascript - 有没有办法从外部访问 dxChart 工具提示？

Question

让我尝试解释一下问题的技术细节:

目标:在鼠标悬停在图例上时显示自定义文本。

我有一个DevExtreme jQuery chart，我需要在图例鼠标悬停时在dxTooltip中显示一些自定义文本

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

通过操作 onTooltipShown event ，我成功地在点鼠标悬停时显示带有自定义文本的工具提示。另外，this Google search result 也不是我们需要的。

            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)
            }

我尝试使用 dxTooltip control 来实现图例鼠标悬停:

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

I'm not able to find a way to access dxChart's tool tip from outside.

有没有办法从外部访问dxChart's tool tip？ (也许在 dxTooltip control 内部)

Answer 1

您可以更改图表tooltip option :

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