如何选择Google Visualization图表列并规避数据类型一致错误

使用Google Charts基于电子表格多列数据绘制跑步时长图表时，遇到以下问题：

• 希望将B列作为图表数据点上方的标注文本，但执行SELECT A, B, D查询时，触发All series on a given axis must be of the same data type错误。
• 推测原因是图表默认将所有查询列当作数据系列，导致X轴同时混入日期和字符串类型，引发类型不匹配。
• 仅查询A、D列时图表可正常生成，尝试参考相关方法但未成功适配3列场景。

成功图表效果：

电子表格数据结构：

原始可运行代码：

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js">
   
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

     function drawChart() {
      var queryString = encodeURIComponent('SELECT A, D');

      var query = new google.visualization.Query(
          'https://docs.google.com/spreadsheets/d/1xRV24c1itTkK1OWLo3KdpVhkjXpuMzi8lXi4UFHanso/gviz/tq?sheet=Sheet1&headers=1&tq=' + queryString);
      query.send(handleSampleDataQueryResponse);
    }

    function handleSampleDataQueryResponse(response) {
      if (response.isError()) {
        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
        return;
      }

      var data = response.getDataTable();

      var options = {
          title: 'L\'s 2024 Cross Country Run Times ',
          width: 900,
          height: 500,
          trendlines: {
              0: {
                color: 'blue',
              }
          },
          vAxis: {
            format: 'mm:ss'
          }
        };

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

    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 100%; height: 500px;"></div>
  </body>
</html>

核心思路是：将B列设置为注释角色（annotation role），而非数据系列，这样图表就不会把它当作轴数据处理，而是作为对应数据点的标注文本。

修改步骤如下：

1. 修改查询字符串，获取A、B、D三列数据；
2. 重新构造DataTable，将B列的值映射为D列数据点的注释；
3. 使用新的DataTable绘制图表。

修改后的完整代码：

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js">
   
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

     function drawChart() {
      // 修改查询字符串，获取A、B、D三列
      var queryString = encodeURIComponent('SELECT A, B, D');

      var query = new google.visualization.Query(
          'https://docs.google.com/spreadsheets/d/1xRV24c1itTkK1OWLo3KdpVhkjXpuMzi8lXi4UFHanso/gviz/tq?sheet=Sheet1&headers=1&tq=' + queryString);
      query.send(handleSampleDataQueryResponse);
    }

    function handleSampleDataQueryResponse(response) {
      if (response.isError()) {
        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
        return;
      }

      var originalData = response.getDataTable();
      // 构造新的DataTable，定义列类型和角色
      var chartData = new google.visualization.DataTable();
      // 添加X轴列（日期）
      chartData.addColumn(originalData.getColumnType(0), originalData.getColumnLabel(0));
      // 添加Y轴列（时长）
      chartData.addColumn(originalData.getColumnType(2), originalData.getColumnLabel(2));
      // 添加注释列，角色为annotation
      chartData.addColumn({type: 'string', role: 'annotation'});

      // 遍历原始数据，填充新DataTable
      for (var i = 0; i < originalData.getNumberOfRows(); i++) {
        chartData.addRow([
          originalData.getValue(i, 0),
          originalData.getValue(i, 2),
          originalData.getValue(i, 1)
        ]);
      }

      var options = {
          title: 'L\'s 2024 Cross Country Run Times ',
          width: 900,
          height: 500,
          trendlines: {
              0: {
                color: 'blue',
              }
          },
          vAxis: {
            format: 'mm:ss'
          },
          // 可选：调整注释文本的样式
          annotations: {
            textStyle: {
              fontSize: 10,
              bold: true
            }
          }
        };

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

    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 100%; height: 500px;"></div>
  </body>
</html>

• Google Charts中，annotation角色用于定义数据点的标注文本，不会被当作数据系列处理，因此避免了轴数据类型不匹配的问题；
• 重新构造DataTable时，严格对应原始数据的列类型，确保X轴为日期、Y轴为时长，注释列为字符串；
• 可通过annotations.textStyle配置项自定义标注文本的字体大小、粗细等样式。

内容的提问来源于stack exchange，提问作者user1610717