工具提示中的附加图表可能吗?

时间:2016-04-24 19:22:42

标签: html highcharts tooltip

有没有人试图将另一个包含完全不同数据的图表插入到悬停在数据点上时弹出的工具提示? 我已经检查了将HTML传递给格式化程序的可能性,但不确定它是如何动态的。

我有一个气泡图,将小线图添加到气泡的工具提示中是完美的。

1 个答案:

答案 0 :(得分:3)

是的,这是可能的。

如果您将工具提示的useHTML设置为true并在其中创建图表,那么您将在工具提示中获得图表。

示例:http://jsfiddle.net/n9z7r5uj/

$(function() {
  $('#container').highcharts({
    series: [{
      type: 'bubble',
      data: [[1,2,3],[4,1,6],[2,3,9]]
    }],
    tooltip: {
      useHTML: true,
      pointFormatter: function() {
        var data = [this.x, this.y, this.z];
        setTimeout(function() {
          $('#chart').highcharts({
            title: {
                text: ''
            },
            legend: {
                enabled: false
            },
            credits: {
                enabled: false
            },
            series: [{
                animation: false,
              data: data
            }],
            yAxis: {
                title: ''
            },
            xAxis: {
                categories: ['x','y','z']
            }
          });
        }, 0);
        return '<div id="chart" style="width: 100px; height: 150px;"></div>';
      }
    }
  });
});