javascript - 在 jQuery 工具提示中使用动态 ID 渲染 Highchart

Question

我正在尝试将 highchart 图表渲染到 jquery 工具提示。我还想传递悬停元素的 ID，以便将其作为 renderTo 参数的变量直接传递到 highcharts。现在我无法让它发挥作用。请点击此处 JS fiddle:

我的代码如下。

  $(document).tooltip({

    open: function() {

    var widget = $(this).data("ui-tooltip");
    var widget = $(widget.element[0]).attr("id")

      Highcharts.chart({
        chart: {
          renderTo: widget,
          type: 'bar'
        },

编辑

我需要悬停元素的 ID。至少我认为我是这样的。原因是我需要将特定于该 ID 的数组提供给 highchart 函数。另外，我可能想将鼠标悬停在一个类上并将图形生成到带有前缀的 div 中。这是另一个jsfiddle用伪代码。

HTML

<p>
 <label for="age">Your age:</label>
 <input id="age" title="<div class='container' id='containerX'>
 <div id='chart_containerX' style='width:500px;height:500px;background:red'>
 </div>
</div>"/>
    </p>
    <p>Hover the field to see the tooltip.</p>

JScript

$(function() {
  $(".container").tooltip({

  <pseudo> get ID and generate array so that it can be passed to highcharts </pseudo>
  <pseudo> get ID and add 'chart_' prefix so that it can be passed to renderTo </pseudo>


    open: function(event, ui) {
      ui.tooltip.highcharts({
        data: { <<'array specific to this chart'>>},
        chart: {
          renderTo: <<chart_container (with prefix!)>>
          type: 'bar'
        },

Answer 1

这是学习仔细检查文档并进行调试的完美示例。

首先，您不需要元素 ID 即可将 Highcharts 渲染到元素。 As documentation says ，你可以这样做:

element.highcharts({/* options */});

其次，您是否尝试过查看您的widget变量实际上包含一些东西？如果您执行 console.log(widget) ，您将看到控制台输出未定义，如果您这样做 console.log($(this).data("ui-tooltip"))您会看到控制台记录了文档，而不是小部件元素。这是 check the documentation 的完美点并看到 open事件接收第二个 ui实际工具提示元素的参数，因为它是 jQuery 元素，所以不需要 $(ui.tooltip)但直接访问ui.tooltip .

现在有了所有这些信息，您可以执行以下操作:

open: function(event, ui) {
  ui.tooltip.highcharts({

这就是:https://jsfiddle.net/yx27xf7h/5/

重要:当小部件关闭时，您需要销毁 Highchart，否则将以内存泄漏结束(在此处插入戏剧性的 ♪DUN DUN DUUUN♫ 音乐)。

编辑:如果您想使用容器元素，最好避免添加 ID，因为 ID 在整个网页中必须是唯一的，因此您必须找到一种方法每次都创建唯一的 ID，这就是在可以的情况下添加额外的代码躲开它。同一任务的代码越少越好。

当使用动态创建和销毁的容器时，最好使用引用和将它们收集为父容器内引用的方法，例如执行 .class或使用数据属性，如下所示:https://jsfiddle.net/yx27xf7h/6/