在工具提示格式化程序中创建图表

Question

我试图创建一个内部格式化程序[tooltip config],其中我试图动态创建一个图表,但未能实现.有什么好主意吗？

Answer 1

在工具提示中创建新容器formatter,并创建新图表.重要的是在渲染工具提示后创建图表.例如使用setTimeout.此外,useHTML: true是必需的,因此formatter将返回HTML元素,而不是SVG.

参见工作演示:http://jsfiddle.net/EtvMR/4/

当然,您需要根据悬停点获取一些数据,但在示例中我使用的是静态数据.

$('#container').highcharts({
    tooltip: {
        useHTML: true,
        formatter: function() {
            setTimeout( function() {
                $("#hc-tooltip").highcharts({
                    series: [{
                        data: [12, 12]
                    }]
                });
            }, 10)

            return '<div id="hc-tooltip"></div>';
        }
    },
    series: [{
        type: 'column',
        data: [29.9, 71.5]
    }]
});