Google Chartsエリアチャートのカスタムツールチップが期待通りに機能しない

Question

Googleエリアチャートにツールチップを追加しようとしていますが、予期しない動作が発生しています。私はArea Chart JSFiddle exampleをとり、hereのようにカスタムツールチップを追加するように修正しました。ここ

google.charts.load('current', {'packages':['corechart']}); 
    google.charts.setOnLoadCallback(drawChart); 

    function drawChart() { 
    var data = google.visualization.arrayToDataTable([ 
     ['Year', 'Sales', 'Expenses', { type: 'string', role: 'tooltip'}], 
     ['2013', 1000,  400, 'wtf'], 
     ['2014', 1170,  460, 'hithere'], 
     ['2015', 660,  1120, 'doh'], 
     ['2016', 1030,  540, 'moohaha'] 
    ]); 

    var options = { 
     title: 'Company Performance', 
     hAxis: {title: 'Year', titleTextStyle: {color: '#333'}}, 
     vAxis: {minValue: 0}, 
     focusTarget: 'category' 
    }; 

    var chart = new google.visualization.AreaChart(document.getElementById('chart_div')); 
    chart.draw(data, options); 
    } 

JSFiddle：：私の内容は次のようになりますhttps://jsfiddle.net/accelerate/y18tb8eq/

全体ではなく、ツールチップの内容を置き換える私は期待のように、ツールチップの「費用」行は、私のツールチップのデータに置き換えられます。例えば、第1のデータセットのツールチップは、次のようになります。

2013 
Sales: 1,000 
Expenses: wtf 

誰かが私が間違ってやっているものを私に説明できますか？

Answer 1

私はそれを理解しました。どのコラムが問題にあるかを示します。最初の列の直後にツールヒント列を配置する必要がありました。したがって、私の見出しの列は次のようになります：

['Year', { type: 'string', role: 'tooltip'}, 'Sales', 'Expenses']