在工具提示中显示 Amcharts 饼图

Question

我的页面上显示了一段文字。当鼠标悬停在它上面时，我希望工具提示中出现一个 Amcharts 饼图。

我尝试使用 Bootstrap 工具提示，并在工具提示标题参数内附加了一个 id 为“chartdiv”的 div，然后初始化图表。

工具提示出现，但它是空的。

有没有办法让饼图出现在工具提示中？

感谢任何帮助！

Answer 1

要使饼图出现在工具提示中，您必须做几件事：

1) 确保在您的工具提示选项中启用html。

2) 确保您的工具提示大小合适。您可能需要调整 bootstrap 的 .tooltip-inner 选择器来考虑您的图表，如下所示：

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

3) 由于 bootstrap 在您将鼠标悬停/移出时有效地创建和删除标题标签中的元素，因此您需要确保在适当的事件中创建和清理图表，例如 shown.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>