Google Combo Chart散点图自定义Tooltip失效问题求助

在标准散点图中自定义Tooltip可正常显示（示例用'XXX'替代数据行名称），但在散点图+折线图的Google Combo Chart中，散点图仅显示默认Tooltip，自定义效果失效，求解决配置遗漏问题。

实现代码 #

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">

google.charts.load('current', {
  callback: drawChart,
  packages:['corechart']
});

function drawChart() {
  var data = new google.visualization.DataTable();

  data.addColumn('number', 'others_average');
  data.addColumn('number', '');
  // A column for custom tooltip content
  data.addColumn({
    type: 'string',
    role: 'tooltip',
  });

  data.addRows([
    <?php
    $wa_startindex = 0;
    $i=0;     
    while(!$chart->atEnd()) {
      $wa_startindex = $chart->Index;
    ?>
        [<?php echo($chart->getColumnVal("others_average")); ?>, <?php echo($chart->getColumnVal("band")); ?>, 'XXX']   
        <?php if($i<($chart->TotalRows)) echo ',';?>
    <?php
        $i++;
      $chart->moveNext();
    }
    $chart->moveFirst(); //return RS to first record
    unset($wa_startindex);
    unset($wa_repeatcount);
    ?>
  ]);

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1, {
    label: 'y1=x',
    type: 'number',
    calc: function (dt, row) {
      return dt.getValue(row, 0)
    }
  }]);

  var options = {
    seriesType: 'scatter',
    series: {
      1: {
        type: 'line'
      }
    },
    hAxis: {title: 'Average Band (other courses)', direction:-1,  viewWindow: { min: 1, max: 9 }, ticks: [1,2,3,4,5,6,7,8,9], viewWindowMode: "explicit"},
    vAxis: {title: '<?php echo($chart->getColumnVal("course_title")); ?> Band', direction:-1,  viewWindow: { min: 1, max: 9 }, ticks: [1,2,3,4,5,6,7,8,9], viewWindowMode: "explicit"},
    legend: 'none'  
  };

  var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
  chart.draw(view, options);
}
</script>

问题源于两处配置遗漏：

• DataView未包含自定义Tooltip列：你创建的DataView仅包含原数据表的前两列和计算生成的折线图列，原数据表中索引为2的自定义Tooltip列未被纳入，导致Combo Chart无法读取自定义Tooltip内容。
• 未指定散点图系列的Tooltip来源：在Combo Chart中，需要为散点图系列（series 0）明确启用自定义Tooltip。

修改步骤 #

1. 更新DataView配置，加入自定义Tooltip列：
   将view.setColumns的代码修改为：

var view = new google.visualization.DataView(data);
view.setColumns([
  0, 
  1, 
  {
    type: 'string',
    role: 'tooltip',
    sourceColumn: 2 // 关联原数据表中的自定义Tooltip列
  },
  {
    label: 'y1=x',
    type: 'number',
    calc: function (dt, row) {
      return dt.getValue(row, 0)
    }
  }
]);

2. 在options中为散点图系列配置Tooltip：
   在series配置里添加散点图（series 0）的Tooltip设置：

var options = {
  seriesType: 'scatter',
  series: {
    0: {
      tooltip: { isHtml: false } // 纯文本Tooltip设为false，HTML内容设为true
    },
    1: {
      type: 'line'
    }
  },
  // 保留原有hAxis、vAxis、legend等配置
};

修改完成后，Combo Chart中的散点图即可正常显示自定义Tooltip。

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