在工具提示中顯示Amcharts餅圖

Question

我的頁面上顯示文本。 當鼠標懸停在其上方時，我希望Amcharts餅圖出現在工具提示中。

我嘗試使用Bootstrap工具提示，並在工具提示title參數內附加了ID為“ chartdiv”的div，然后初始化圖表。

工具提示出現，但為空。

有什么方法可以使餅圖顯示在工具提示中？

任何幫助表示贊賞！

Answer 1

要使餅圖出現在工具提示中，您必須做一些事情：

1）確保在工具提示選項中啟用了html 。

2）確保工具提示的大小合適。 您可能需要調整bootstrap的.tooltip-inner選擇器，以按如下方式考慮圖表：

.tooltip-inner {
    max-width: 100% !important;
}

3）由於引導程序可以在鼠標懸停時有效地創建和刪除title標記中的元素，因此需要確保在適當的事件（例如shown.bs.tooltip和hidden.bs.tooltip創建和清理圖表。 hidden.bs.tooltip 。 假設您的工具提示位於ID為#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; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="//www.amcharts.com/lib/3/amcharts.js"></script> <script src="//www.amcharts.com/lib/3/pie.js"></script> <script src="//www.amcharts.com/lib/3/themes/dark.js"></script> <p>This is some test text. <br><span class="chart-tooltip" id="chart-tooltip" title="<p>Pie chart:</p> <div id='chartdiv'></div>" data-toggle="tooltip" data-placement="right">Hover here for a chart</span></p>