Question

我正在尝试在Google Chart中实施工具提示自定义。

我有一个想要成为民意调查跟踪器的网页。它从Google电子表格中获取数据，并根据这些数据创建线图和表格。（有两个过滤器可以同时与图表和表格进行交互。）

页面：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/

使用电子表格

1 个答案: