Google Charts：全列のツールチップの1つ

Question

Google Chartsを使用した基本面積チャートがあります。私はグラフ上の各点のツールチップを設定することができますが、列のすべての点について単一のツールチップを持つ方法があります。ここで

は、望ましい行動のスクリーンショットです：

あなたはカーソルがグラフ上の点の上にあるときに、縦線が引かれ、1つのツールチップは、すべてのデータを記述するために表示されていることがわかりますその列に（両方の行のデータ）。必要に応じてlive exampleを参照してください。

これはGoogle Chartsで実現できますか？

Answer 1

すべてを行う必要がある（折れ線グラフの場合）のオプションに以下を追加します：ここでfocusTarget: 'category'

は（ちょうど終わりGoogle Playgroundを開き、オプションに上記の行を追加します例です。 ）：

function drawVisualization() { 
    // Create and populate the data table. 
    var data = google.visualization.arrayToDataTable([ 
    ['x', 'Cats', 'Blanket 1', 'Blanket 2'], 
    ['A', 1,  1,   0.5], 
    ['B', 2,  0.5,   1], 
    ['C', 4,  1,   0.5], 
    ['D', 8,  0.5,   1], 
    ['E', 7,  1,   0.5], 
    ['F', 7,  0.5,   1], 
    ['G', 8,  1,   0.5], 
    ['H', 4,  0.5,   1], 
    ['I', 2,  1,   0.5], 
    ['J', 3.5,  0.5,   1], 
    ['K', 3,  1,   0.5], 
    ['L', 3.5,  0.5,   1], 
    ['M', 1,  1,   0.5], 
    ['N', 1,  0.5,   1] 
    ]); 

    // Create and draw the visualization. 
    new google.visualization.LineChart(document.getElementById('visualization')). 
     draw(data, {curveType: "function", 
        width: 500, height: 400, 
        vAxis: {maxValue: 10}, 
    // This line will make you select an entire row of data at a time 
        focusTarget: 'category' 
       } 
     ); 
} 

パイと同じように簡単！詳細については、あなたがより複雑な何かをしたい場合、あなたはここでdomain Data Role

と周りいじることができfocusTarget in the Google Documentation

を参照すると、コードのサンプルビットは次のとおりです。

google.load('visualization', '1.1', {'packages':['corechart']}); 

google.setOnLoadCallback(drawChart_C6); 

    function drawChart_C6() { 
    var data = new google.visualization.DataTable(); 
    data.addColumn({type: 'string', role: 'domain'}, '2009 Quarter'); 
    data.addColumn('number', '2009 Sales'); 
    data.addColumn('number', '2009 Expenses'); 
    data.addColumn({type: 'string', role: 'domain'}, '2008 Quarter'); 
    data.addColumn('number', '2008 Sales'); 
    data.addColumn('number', '2008 Expenses'); 
    data.addRows([ 
     ['Q1 \'09', 1000, 400, 'Q1 \'08', 800, 300], 
     ['Q2 \'09', 1170, 460, 'Q2 \'08', 750, 400], 
     ['Q3 \'09', 660, 1120, 'Q3 \'08', 700, 540], 
     ['Q4 \'09', 1030, 540, 'Q4 \'08', 820, 620] 
    ]); 

    var chart = new google.visualization.LineChart(document.getElementById('chart_C6')); 
    chart.draw(data, {width: 400, height: 240, legend:'right', focusTarget: 'category'}); 
    }