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

时间:2016-11-16 01:57:51

标签: charts google-visualization tooltip

我正在尝试将工具提示添加到Google区域图表中,但我遇到了意外行为。我使用了this question并对其进行了修改,以便按照Area Chart JSFiddle example所述添加自定义工具提示。我的内容如下:

  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:here

而不是像我预期的那样替换整个工具提示内容,工具提示中的“费用”行将替换为我的工具提示数据。例如,第一组数据的工具提示如下所示:

2013
Sales: 1,000
Expenses: wtf

有人可以向我解释我做错了吗?

1 个答案:

答案 0 :(得分:0)

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

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