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

このようにして、画像のカスタム ツールチップを作成できます。

ツールチップ テキストとその背景をチャートに追加する構文については、このリンクを使用しました。