將工具提示添加到使用Highcharts呈現的圖像Renderer.image（）api

Question

我想爲使用以下格式呈現的圖像添加工具提示： image (String source, Number x, Number y, Number width, Number height) api。

我想不出一種方法來做到這一點，我使用org.moxieapps.gwt.highcharts API的 在我的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(); 

以這種方式可以創建圖像的自定義工具提示。

我使用this鏈接來添加工具提示文本及其背景到圖表的語法。