使用电子表格中的数据自定义 Google 折线图中的工具提示

Question

我正在尝试在 Google 图表中实现工具提示自定义。

我有一个网页想成为投票跟踪器。它从 Google 电子表格中获取数据，并根据这些数据创建折线图和 table。（有 2 个过滤器同时与图表和 table 交互）。

页面：https://jsfiddle.net/a555xLfp/
数据： https://docs.google.com/spreadsheets/d/1O9Bc9Vg_iIVMLdsIIZNwG8UC3L-p-8fA4-44xkFVVQQ/edit?usp=sharing

数据来自每日选举投票。但他们提供了 结果组 （即第 1 方：50 至 52 个席位；第 2 方：bw 40-42）。
为了绘制图表，我复制了列并放置了中间值（即 51 和 41）。

但我想将括号（C-D 列）显示为工具提示，而不是用于绘制图表的数字（E-F 列）。
我在 https://developers.google.com/chart/interactive/docs/customizing_tooltip_content 上看到您可以为列定义一个角色以充当工具提示内容。

我被屏蔽了。是否可以将此工具提示自定义转换为从电子表格调用数据的图表？
作为图表声明中的选项？

  var lineas = new google.visualization.ChartWrapper({
      'chartType': 'LineChart', 
      'containerId': 'fiebre',
      'options': {
        'width': 980,
        'height': 400,
      },
      'view': {'columns': [0, 4, 5]} //the ones used to draw the chart
    });

很抱歉，我无法向您展示任何测试，因为我还没有获得任何成功的代码。

谢谢！

Answer 1

将 tooltip 列添加到 view:

'view': {'columns': [
                     0,
                     4,
                     {role:'tooltip',sourceColumn:2},
                     5,
                     {role:'tooltip',sourceColumn:3}
                    ]}

结果： https://jsfiddle.net/doktormolle/zsagu46h/

另外： 当第 2 列和第 3 列的格式固定 (n-n) 时，您不需要将第 4+5 列与平均值相加。您可以使用函数计算值：

function avg(col){
  return function(data, row){
    var val=data.getValue(row,col).split('-');
      return ((Number(val[0])+Number(val[1]))/2);
  } 
}

var lineas = new google.visualization.ChartWrapper({
      'chartType': 'LineChart', 
      'containerId': 'fiebre',
      'options': {
        'width': 980,
        'height': 400
      },
      'view': {'columns': [
                            0,
                            {type:'number',calc:avg(2)},
                            {role:'tooltip',sourceColumn:2},
                            {type:'number',calc:avg(3)},
                            {role:'tooltip',sourceColumn:3}
                          ]
              }
});

结果： https://jsfiddle.net/doktormolle/4o3g22wr/

使用电子表格中的数据自定义 Google 折线图中的工具提示

Customize tooltip in Google LineChart with data from spreadsheet

javascript

charts

google-visualization