Highcharts不在jQuery工具提示中呈现
我不确定这是一个错误还是预期的行为。 我试图在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函数？ 我尝试了以下，但它不起作用。 我认为这是因为在确定身份证之前，高层火灾发生了？
$('body').tooltip({
open: function() {
var widget = $(this).data("ui-tooltip");
var widget = $(widget.element[0]).attr("id")
Highcharts.chart(widget, {
chart: {
type: 'bar'
}, {.....etc}
});
});
这个问题是因为#container元素只存在于触发工具提示的元素悬停后的DOM中。 正如你试图在发生这种情况之前定义HighChart，你会得到错误。
为了解决这个问题，你可以使用tooltip()库的open事件在tooltip元素注入到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>