如何将指定列设为Google Sheets图表的Tooltip内容
问题:修改Google Sheets折线图Tooltip,替换为交易说明
我有一份银行数据表格,包含三列:Date(日期)、Total Savings(总储蓄额)、Transaction Description(交易说明)。目前用Date做X轴、Total Savings做Y轴生成了折线图,但鼠标悬停数据点时,Tooltip只显示日期和总储蓄额,我需要把Tooltip里的总储蓄额换成交易说明。尝试用宏解决没成功,附上当前代码求方案:
function banking() { var spreadsheet = SpreadsheetApp.getActive(); spreadsheet.getRange('A:C').activate(); var sheet = spreadsheet.getActiveSheet(); var chart = sheet.newChart() .asLineChart() .addRange(spreadsheet.getRange('A1:C175')) .setMergeStrategy(Charts.ChartMergeStrategy.MERGE_COLUMNS) .setTransposeRowsAndColumns(false) .setNumHeaders(1) .setHiddenDimensionStrategy(Charts.ChartHiddenDimensionStrategy.IGNORE_BOTH) .setOption('useFirstColumnAsDomain', true) .setOption('isStacked', 'false') .setOption('title', 'Total vs. Date') .setXAxisTitle('Date') .setYAxisTitle('Total') .setPosition(16, 12, 69, 9) .build(); sheet.insertChart(chart); };
解决方案
可以通过Google Sheets图表API的tooltip配置项自定义悬停内容,直接将交易说明列绑定到Tooltip中。修改后的代码如下:
function banking() { var spreadsheet = SpreadsheetApp.getActive(); var sheet = spreadsheet.getActiveSheet(); var chart = sheet.newChart() .asLineChart() .addRange(spreadsheet.getRange('A1:C175')) .setMergeStrategy(Charts.ChartMergeStrategy.MERGE_COLUMNS) .setTransposeRowsAndColumns(false) .setNumHeaders(1) .setHiddenDimensionStrategy(Charts.ChartHiddenDimensionStrategy.IGNORE_BOTH) .setOption('useFirstColumnAsDomain', true) .setOption('isStacked', 'false') .setOption('title', 'Total vs. Date') .setXAxisTitle('Date') .setYAxisTitle('Total') // 核心配置:自定义Tooltip内容 .setOption('tooltip', { isHtml: true, // 格式化Tooltip,row[0]对应日期列,row[2]对应交易说明列 formatter: function(row) { return `<div><b>日期:</b> ${row[0]}</div><div><b>交易说明:</b> ${row[2]}</div>`; } }) .setPosition(16, 12, 69, 9) .build(); sheet.insertChart(chart); };
关键说明:
- 开启
isHtml: true支持自定义HTML格式的Tooltip,让内容排版更清晰 formatter函数接收每行数据数组,row[0]是A列的日期,row[2]是C列的交易说明,直接用这些值替换原有的总储蓄额显示内容- 折线图的Y轴仍保留总储蓄额的数值展示,仅Tooltip内容替换为交易说明
内容的提问来源于stack exchange,提问作者reisnern21
相关产品推荐
相关产品推荐

