在工具提示中显示Amcharts饼图

时间:2018-08-08 08:02:21

标签: javascript tooltip pie-chart amcharts twitter-bootstrap-tooltip

我的页面上显示文本。当鼠标悬停在鼠标上方时,我希望Amcharts饼图出现在工具提示中。

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

工具提示出现,但为空。

有什么方法可以使饼图显示在工具提示中?

感谢您的帮助!

1 个答案:

答案 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;
}