Highcharts图中的自定义工具提示

时间:2011-09-13 08:43:59

标签: javascript highcharts tooltip

有没有办法在Highcharts图表中制作完全自定义工具提示?不仅是使用不同的数据,还是使用彩色边框,而是使其看起来不同(例如,像带有图片的气泡)。

3 个答案:

答案 0 :(得分:13)

试试这个:

...

tooltip: {
                useHTML: true,
                formatter: function() { 
                    return 'here the html code';
                }
            },

答案 1 :(得分:4)

使用选项/ api,您只能配置边框属性和颜色等内容(请参阅tooltip options)。所以,如果不编辑源代码或者不在api之外,那就不可能了。

工具提示在内部由一个SVG组组成,该组包含一个内部带有文本的矩形。如果要编辑源代码,请查看line 1898周围的Chart.js文件。

答案 2 :(得分:4)

我已经使用了另一个帖子中的另一个帖子,并将useHTML部分与其合并,将顶部的每个工具提示的一部分添加到图像中。我在顶部选择了BBC标志..

所以,你可以使用

tooltip: {
    useHTML: true,
    formatter: function() { 
        // Use regular html syntax
        s = '<img src="" />' + 
        return s;
    }
}

这是jsfiddle work example