2017-10-16 7 views
1

Google chart APIを使用した共同チャートがあります。ここでは、チャートのツールチップを更新したいと思います。Googleグラフ:toopl tipを変更する

これらのチャートには重複が多いため、実際に各離散点にマウスを乗せてデータを見ることができない場合があります。

答えて

1

あなたは...

は、次のスニペットを参照してください、その行のツールチップを構築し、計算列
を提供するために、

var dataView = new google.visualization.DataView(joinedData); 
dataView.setColumns([0, 1, { 
    calc: function (dt, row) { 
    return getTooltip(dt, row); 
    }, 
    role: 'tooltip', 
    type: 'string', 
    p: { 
    html: true 
    } 
}, 2, { 
    calc: function (dt, row) { 
    return getTooltip(dt, row); 
    }, 
    role: 'tooltip', 
    type: 'string', 
    p: { 
    html: true 
    } 
}]); 

function getTooltip(dt, row) { 
    var tooltip = '<div class="tooltip">'; 
    tooltip += '<div>' + dt.getFormattedValue(row, 0) + '</div>'; 

    tooltip += '<div>' + dt.getColumnLabel(1) + '</div>'; 
    if (dt.getValue(row, 1) === null) { 
    tooltip += '<div>' + dt.getFormattedValue(row + 1, 1) + '</div>'; 
    } else { 
    tooltip += '<div>' + dt.getFormattedValue(row, 1) + '</div>'; 
    } 

    tooltip += '<div>' + dt.getColumnLabel(2) + '</div>'; 
    if (dt.getValue(row, 2) === null) { 
    if (row > 0) { 
     tooltip += '<div>' + dt.getFormattedValue(row - 1, 2) + '</div>'; 
    } 
    } else { 
    tooltip += '<div>' + dt.getFormattedValue(row, 2) + '</div>'; 
    } 

    tooltip += '</div>'; 
    return tooltip; 
} 

フルスニペットDataViewを使用することができます - >http://jsfiddle.net/sqdfrf8f/1/


ノート:チャートはそうhtmlプロパティは周りの作業は、データビューのメソッドを使用することです
を設定しませんデータビュー
上の列のプロパティを尊重しないであろうという点で、バグのいくつかの並べ替え、
がある - >toDataTable()また

:Googleのチャートに更新ライブラリを使用する必要性を参照してください - ここにポストされたデータの行が互い違いになっている>update library loader code

+1

を、コメントではありませんからフィドルの場合で、調整するなど、必要はありません行インデックス、このアップデートを見る - > [http://jsfiddle.net/sqdfrf8f/5/] (http://jsfiddle.net/sqdfrf8f/5/) – WhiteHat

関連する問題