javascript - 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 函数？我已经尝试过以下方法，但它不起作用。我认为这是因为 highcharts 在 ID 确定之前触发？

$('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 时，您会收到错误。

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

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

另请注意，我将样式规则移至其自己的样式表中。应尽可能避免使用内联样式。