Question

我正在尝试将高图图表呈现给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♫音乐在这里）。< / p>

编辑：如果你想使用容器元素，最好避免添加ID，因为ID在整个网页中必须是唯一的，所以你必须找到一种方法来每次创建一个唯一的ID并添加额外的ID代码，你可以避免它。同一任务的代码越少越好。

使用动态创建和销毁的容器时，最好使用引用和方法将它们作为父容器内的引用进行收集，例如执行.class或使用数据属性，如下所示：{ {3}}

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

1 个答案: