Highcharts 未在 jQuery 工具提示中呈现

Question

我不确定这是错误还是预期行为。我正在尝试在 jQuery 工具提示中呈现 Highchart，但它不起作用。图表无法呈现。我已经在jsfiddle 中复制了这个问题。

即使您从 jsfiddle 中看到我已经正确引用了容器 div，我也收到错误代码 13：

This error occurs if the chart.renderTo option is misconfigured so that Highcharts is unable to find the HTML element to render the chart in.

关于为什么图表没有出现在 jQuery 工具提示中的任何想法？

编辑

我们如何概括下面的答案，以便将悬停元素的 ID 直接传递给 highcharts 函数？我尝试了以下方法，但它不起作用。我认为这是因为在确定 ID 之前 highcharts 触发了？

$('body').tooltip({
    open: function() {

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

      Highcharts.chart(widget, {
        chart: {
          type: 'bar'
        }, {.....etc}
      });
     });

Answer 1

问题是因为#container 元素只存在于DOM 中 触发工具提示的元素被悬停在上面。当您尝试在此之前定义 HighChart 时，您会收到错误消息。

要解决此问题，您可以使用tooltip() 库的open 事件在将工具提示元素注入 DOM 后定义图表：

$(function() {
  $(document).tooltip({
    open: function() {
      Highcharts.chart('container', {
        chart: {
          type: 'bar'
        },
        title: {
          text: 'Historic World Population by Region'
        },
        subtitle: {
          text: 'Source: <a href="https://en.wikipedia.org/wiki/World_population">Wikipedia.org</a>'
        },
        xAxis: {
          categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
          title: {
            text: null
          }
        },
        yAxis: {
          min: 0,
          title: {
            text: 'Population (millions)',
            align: 'high'
          },
          labels: {
            overflow: 'justify'
          }
        },
        tooltip: {
          valueSuffix: ' millions'
        },
        plotOptions: {
          bar: {
            dataLabels: {
              enabled: true
            }
          }
        },
        legend: {
          layout: 'vertical',
          align: 'right',
          verticalAlign: 'top',
          x: -40,
          y: 80,
          floating: true,
          borderWidth: 1,
          backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
          shadow: true
        },
        credits: {
          enabled: false
        },
        series: [{
          name: 'Year 1800',
          data: [107, 31, 635, 203, 2]
        }, {
          name: 'Year 1900',
          data: [133, 156, 947, 408, 6]
        }, {
          name: 'Year 2012',
          data: [1052, 954, 4250, 740, 38]
        }]
      });
    }
  });
});

.foo {
  position: fixed;
  bottom: 0;
  left: 0;
  background: lightgray;
  width: 100%;
}

#container {
  width: 500px;
  height: 500px;
  background: red;
}

label {
  display: inline-block;
  width: 5em;
}

.ui-tooltip {
  position: absolute;
  background: #f9a235;
  color: #fff;
  padding: 6px 0px;
  border-radius: 25px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<p>
  <label for="age">Your age:</label>
  <input id="age" title="<div id='container'></div>" />
</p>
<p>Hover the field to see the tooltip.</p>

<div class="foo">
  About this SO Question:
  <a href='http://stackoverflow.com/q/23498641/1366033'>How do I make rounded Jquery UI tooltips?</a><br/> Documentation: <a href='http://jqueryui.com/tooltip/'>jQuery - UI - Tooltips</a><br/>
</div>

还请注意，我将样式规则移到了他们自己的样式表中。应尽可能避免使用内联样式。