javascript Highcharts 图表中的自定义工具提示

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/7399051/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-25 23:59:15  来源:igfitidea点击:

Custom tooltips in Highcharts diagrams

javascripthighchartstooltip

提问by Michael Romanenko

Is there any way to make completelycustom tooltips in Highcharts diagrams? Not just with different data, or with coloured border, but to make it look different (for example, like a bubble with picture in it).

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

回答by Miguel Teixeira

Try this:

试试这个:

....

....

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

回答by Krishna Vedula

I've used another post from a different thread, and merged the useHTML section along with it to add an image as part of each tool tip at the top. I chose BBC logo at the top..

我使用了来自不同线程的另一篇文章,并将 useHTML 部分与其合并,以在顶部的每个工具提示中添加一个图像。我在顶部选择了 BBC 标志。

so, you can use

所以,你可以使用

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

Here is the jsfiddle working example

这是 jsfiddle 工作示例

回答by eolsson

Using the options/api you can only configure such things as border properties and colors (see tooltip options). So without editing the source or going outside the api, no it is not possible.

使用 options/api 您只能配置诸如边框属性和颜色之类的东西(请参阅工具提示选项)。因此,如果不编辑源代码或离开 api,这是不可能的。

Internally the tooltip consists of a SVG group that contains a rectangle with a text inside. If you want to edit the source, have a look in the Chart.js file around line 1898.

在内部,工具提示由一个 SVG 组组成,该组包含一个矩形,里面有一个文本。如果要编辑源代码,请查看 Chart.js 文件中第 1898 行附近的内容。