Highcharts无法在jQuery工具提示中呈现

Question

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

我收到错误代码13，即使你从jsfiddle看到我已正确引用容器div：

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函数？我尝试了以下，但它不起作用。我认为这是因为在确定身份证之前，高等法院会发生火灾吗？

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

问题是因为{<1}}元素仅存在于之后的元素中，触发工具提示的元素已经悬停在上面。正如您在此之前尝试定义HighChart一样，您会收到错误。

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

＆＃13;

＆＃13;

tooltip()

＆＃13;

$(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]
        }]
      });
    }
  });
});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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