向使用Highcharts Renderer.image（）api渲染的图像添加工具提示

我想向使用以下方式渲染的图像添加工具提示：

图像（字符串源、数字x、数字y、数字宽度、数字高度）api

我想不出一种方法来实现这一点，我正在使用

org.moxieapps.gwt.highcharts

API

---

在我的GWT应用程序中创建高位图表。

使用

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();

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

---

我使用link语法将工具提示文本及其背景添加到图表中。

使用

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();

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

---

我使用link语法将工具提示文本及其背景添加到图表中。

谢谢。这是一个非常有用的指针。我确实使用它来定制一个组件，该组件需要渲染多个图表标记（具有自定义颜色和工具提示+事件行为和数据）。如何使用多个渲染图像？我正在尝试，但工具提示位置总是显示在最后一个图像位置。谢谢。这是一个非常有用的指针。我确实使用它来定制一个组件，该组件需要渲染多个图表标记（具有自定义颜色和工具提示+事件行为和数据）。如何使用多个渲染图像？我正在尝试，但工具提示位置总是显示在最后一个图像位置。