在工具提示格式器中创建图表 [英] Create chart in tooltip formatter

问题描述

我试图创建一个内部格式化工具[tooltip config]，其中我试图动态创建图表，但未能成功。任何明智的想法？

解决方案

在工具提示内创建新容器 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>'; 
} 
}，
系列：[{
类型：'列'，
数据：[29.9,71.5] 
}] 
} ）; 
  

I tried to create a inside formatter[of tooltip config] inside which I was trying to create a chart dynamically but failed to acheive so. Any bright ideas?

解决方案

Create new container inside tooltip formatter, and there also create new chart. Important part is to create chart after tooltip is rendered. For example use setTimeout. Also, useHTML: true is required, so formatter will return HTML elements, not SVG.

See working demo: http://jsfiddle.net/EtvMR/4/

Of course, you will need to get some data according to hovered point, but in example I'm using static data.

$('#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]
    }]
});

这篇关于在工具提示格式器中创建图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！