Google 图表区域图表自定义工具提示未按预期工作

Question

我正在尝试向 Google 面积图添加工具提示，但我遇到了意外行为。我拿了Area Chart JSFiddle example and modified it to add a custom tooltip as described 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/

工具提示中的 'expenses' 行被替换为我的工具提示数据，而不是像我预期的那样替换整个工具提示内容。例如，第一组数据的工具提示如下所示：

2013
Sales: 1,000
Expenses: wtf

有人可以向我解释我做错了什么吗？

Answer 1

我明白了。工具提示在哪一列很重要。我需要在第一列之后立即放置工具提示列。所以我的 header 专栏必须如下所示：

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

Google 图表区域图表自定义工具提示未按预期工作

Google Charts area chart custom tooltip not working as expected

charts

tooltip

google-visualization