アニメーションと連携するカスタムツールチップを取得しているGoogleのグラフ

Question

これは私のコードですが、壊れています。私はパーセンテージの代わりにマウスの上に絶対的な数字を表示したい。 Googleのガイドにはアニメーションの例はありません。例では配列ではなくデータテーブルメソッドを使用しています。私は何とかGoogleに私がツールチップである第3列を持っていることを伝える必要があると思う。現在はそれをバーとして描画する。

 google.load("visualization", "1", { 
    packages: ["corechart"] 
}); 
google.setOnLoadCallback(init); 

function init() { 
    var rowData1 = [ 
    ['key', 'Percentage', 'tooltip'], 
    ['PLUS', 20.9, 3855], 
    ['EDU', 18.4, 3400], 
    ['GEO', 15.6, 2872], 
    ['NO FLAG', 45.2, 8342] 
    ]; 
    var rowData2 = [ 
    ['key', 'Percentage', 'tooltip'], 
    ['PLUS', 54.2, 974], 
    ['EDU', 6.7, 120], 
    ['GEO', 39.2, 704], 
    ['NO FLAG', 0.0, 0] 
    ]; 

    // Create and populate the data tables. 
    var data = []; 
    data[0] = google.visualization.arrayToDataTable(rowData1); 
    data[1] = google.visualization.arrayToDataTable(rowData2); 

    var options = { 
    // removes the key 
    legend: { 
     position: 'none' 
    }, 
    // puts popup boxes on bar 

    width: 600, 
    height: 300, 
    vAxis: { 
     title: "vertical axis" 
    }, 
    hAxis: { 
     title: "horizontal axis" 
    }, 
    seriesType: "bars", 
    series: { 
     5: { 
     type: "line" 
     } 
    }, 
    animation: { 
     duration: 1000, 
     easing: 'out' 
    }, 
    }; 
    var current = 0; 
    // Create and draw the visualization. 

    var chart = new google.visualization.ComboChart(document.getElementById('chart_div')); 
    var button = document.getElementById('b1'); 

    function drawChart() { 
    // Disabling the button while the chart is drawing. 
    button.disabled = true; 
    google.visualization.events.addListener(chart, 'ready', 
     function() { 
     button.disabled = false; 
     button.value = 'Switch to ' + (current ? 'Tea' : 'Coffee'); 
     }); 
    options['title'] = 'Monthly ' + (current ? 'Coffee' : 'Tea') + ' Production by Country'; 
    // custom popup box request 

    chart.draw(data[current], options); 
    } 
    drawChart(); 

    button.onclick = function() { 
    current = 1 - current; 
    drawChart(); 
    } 
} 

私はDataTableのに配列データを変換して描画するためにどのグラフを選択するには

 if (current == 0) { chart.draw(dataTable1, options); } 
    else{ chart.draw(dataTable2, options); } 

を使用して試してみたが、これは動作しません。それはあまり分かりにくく、控えめで、データテーブルにはたくさんのプロパティが設定されている必要があります。

Answer 1

オブジェクト表記でツールチップ列を定義する必要があります...

var rowData1 = [ 
    ['key', 'Percentage', {role: 'tooltip'}], 
    ['PLUS', 20.9, 3855], 
    ['EDU', 18.4, 3400], 
    ['GEO', 15.6, 2872], 
    ['NO FLAG', 45.2, 8342] 
]; 
var rowData2 = [ 
    ['key', 'Percentage', {role: 'tooltip'}], 
    ['PLUS', 54.2, 974], 
    ['EDU', 6.7, 120], 
    ['GEO', 39.2, 704], 
    ['NO FLAG', 0.0, 0] 
]; 

Answer 2

変更Googleの可視化コンボチャートシリーズのオプション以下のように：すべてのデータテーブルの列は、Googleの可視化コンボチャートで1シリーズとして考えられている

series: { 
     0: { 
     type: "line" 
     } 
    } 

。

ここ

"割合"がNOの0

ラインシリーズではありません "ツールチップ" NOであると、Googleの可視化コンボチャートと間違って1

何もバーシリーズではありません。

上記変更した後は、出力の下に表示されます：