2

デフォルトのツールチップを置き換えるために、バブルチャートにカスタムツールチップを追加しようとしています。ドキュメントサイト（ここstring）の指示に従って、DataTableに新しい列を追加しましたrole: 'tooltip'。ただし、次のJSフィドルの例では、カスタムツールチップコンテンツがレンダリングされないことがわかります。グラフには、デフォルトのツールチップが引き続き表示されます。

このカスタムツールチップコンテンツを表示するために私がまだ何をする必要があるか知っている人はいますか？

http://jsfiddle.net/MPBmY/2/

4

2 に答える 2

2

最終的に、かなりうまく機能するカスタム ツール ヒント ポップアップを作成しました。

バブル チャートの div が次のように定義されていると仮定します。

<div id="bubble_chart_div"></div>

次に、以下の JavaScript を使用しました。Google チャート データの設定方法と Google チャート パッケージの読み込み方法については省略していることに注意してください。このコードは、カスタム ツールリップ ポップアップを取得する方法を示しているだけです。

    var mouseX;
    var mouseY;
    $(document).mousemove( function(e) {
        mouseX = e.pageX; 
        mouseY = e.pageY;
    });

    /*
     *
     *instantiate and render the chart to the screen
     *
     */
    var bubble_chart = new google.visualization.BubbleChart(document.getElementById('bubble_chart_div'));
    bubble_chart.draw(customer_product_grid_data_table, options);

    /*
     * These functions handle the custom tooltip display
     */
    function handler1(e){
        var x = mouseX;
        var y = mouseY - 130;
        var a = 1;
        var b = 2;
        $('#custom_tooltip').html('<div>Value of A is'+a+' and value of B is'+b+'</div>').css({'top':y,'left':x}).fadeIn('slow');
    }
    function handler2(e){
        $('#custom_tooltip').fadeOut('fast');
    }

    /*
     *  Attach the functions that handle the tool-tip pop-up
     *  handler1 is called when the mouse moves into the bubble, and handler 2 is called when mouse moves out of bubble
     */
    google.visualization.events.addListener(bubble_chart, 'onmouseover', handler1);
    google.visualization.events.addListener(bubble_chart, 'onmouseout', handler2);
于 2013-01-31T14:18:07.553 に答える
1

ヘルプドキュメントの下部に記載されているように：

現時点では、HTML ツールチップは次のグラフ タイプでサポートされています。

  • エリアチャート
  • 棒グラフ
  • ローソク足チャート
  • 縦棒グラフ
  • コンボチャート
  • 折れ線グラフ
  • 散布図

残念ながら、バブル チャートはカバーされていないため、カスタム HTML ツールチップを追加することはできません。必要に応じてカスタム JavaScript を記述してツールチップを作成できますが、既存の機能を使用してやりたいことを実行することはできません。

于 2013-01-30T02:04:11.337 に答える