我的页面上显示文本。当鼠标悬停在鼠标上方时,我希望Amcharts饼图出现在工具提示中。
我尝试使用Bootstrap工具提示,并在工具提示title参数内附加了一个ID为“ chartdiv”的div,然后初始化图表。
工具提示出现,但为空。
有什么方法可以使饼图显示在工具提示中?
感谢您的帮助!
答案 0 :(得分:1)
要使饼图显示在工具提示中,您必须做一些事情:
1)确保在工具提示选项中启用了html
。
2)确保工具提示的大小合适。您可能需要调整引导程序的.tooltip-inner
选择器,以便按如下方式处理图表:
.tooltip-inner {
max-width: 100% !important;
}
3)由于引导程序会在鼠标移至/移出时有效地创建和删除title标记中的元素,因此您需要确保在适当的事件(例如{{1})上创建并清理图表}和shown.bs.tooltip
。假设您的工具提示位于ID为hidden.bs.tooltip
的元素中:
#chart-tooltip
下面的演示
$("#chart-tooltip").tooltip({ html: true });
var chart;
$("#chart-tooltip").on("shown.bs.tooltip", function() {
//create the chart when the tooltip is visible
chart = AmCharts.makeChart("chartdiv", {
// chart options here
});
});
$("#chart-tooltip").on("hidden.bs.tooltip", function() {
//clean up the chart instance when the tooltip is hidden
chart.clear();
});
$("#chart-tooltip").tooltip({ html: true });
var chart;
$("#chart-tooltip").on("shown.bs.tooltip", function() {
//create the chart when the tooltip is visible
chart = AmCharts.makeChart("chartdiv", {
type: "pie",
theme: "dark",
dataProvider: [
{
country: "Lithuania",
litres: 501.9
},
{
country: "Czech Republic",
litres: 301.9
},
{
country: "Ireland",
litres: 201.1
},
{
country: "Germany",
litres: 165.8
},
{
country: "Australia",
litres: 139.9
},
{
country: "Austria",
litres: 128.3
},
{
country: "UK",
litres: 99
},
{
country: "Belgium",
litres: 60
},
{
country: "The Netherlands",
litres: 50
}
],
valueField: "litres",
titleField: "country",
pullOutRadius: 0,
startDuration: 0,
balloon: {
fixedPosition: true
}
});
});
$("#chart-tooltip").on("hidden.bs.tooltip", function() {
//clean up the chart instance when the tooltip is hidden
chart.clear();
});
#chartdiv {
width: 500px;
height: 300px;
}
.chart-tooltip {
text-decoration: underline double #ff0000;
}
.tooltip-inner {
max-width: 100% !important;
}