image - 向使用 Highcharts Renderer.image() api 渲染的图像添加工具提示

Question

我想为使用渲染的图像添加工具提示： image (String source, Number x, Number y, Number width, Number height) api。

我想不出办法做到这一点，我正在使用org.moxieapps.gwt.highchartsAPI 在我的 GWT 应用程序中创建高图表。

Answer 1

使用chart.renderer.text和chart.renderer.rect根据图像的位置绘制和定位您自己的自定义工具提示。

这是我用来显示使用生成的图像的工具提示的示例代码片段chart.renderer.image-

marker = chart.renderer.image(src, x, y, imageSize, imageSize)
            .on('click', function() {`enter code here`
            })
            .attr({
              zIndex: 100
            })
            .on('mouseover', function() {
              //Call back for image mouse hover                     
              //Draw a text relative to Image X and Y                                                           
                  text = chart.renderer.text("Your tooltip Text",X, Y)
                        .add();

                        var box = text.getBBox();

                        //Now draw a box surrounding the tool tip text                     
            textBG = chart.renderer.rect(box.x, box.y,box.width, box.height, 5)
                .attr({
                    fill: '#FFFFEF',
                        stroke: 'gray',
                                    'stroke-width': 1,
                        zIndex: 4
                      })
                .add();
            })
               .on('mouseout', function() {

                         //Call back for mouse out on the image
                         //Destroy Both markers text and textBG on mouse out
                         //Make text and textBG as global functions for access accross functions 
                         text.destroy();
                         textBG.destroy();  

                         })
                 .add();

通过这种方式，您可以为图像创建自定义工具提示。

我使用此链接将工具提示文本及其背景添加到图表的语法。