如何在Google Charts Calendar中使用getSelection()获取数字列值？

你遇到的问题是因为chart.getSelection()返回的选中项对象里并没有number属性，直接访问item.number自然会得到空值。要获取对应日期的数值，需要通过选中项的row索引从dataTable中提取数据。

修改后的selectHandler函数 #

function selectHandler() {
  var selection = chart.getSelection();
  for (var i = 0; i < selection.length; i++) {
    var item = selection[i];
    // 确保选中项有有效的行索引
    if (item.row != null) {
      // 从dataTable获取日期和对应的数值
      var date = dataTable.getValue(item.row, 0);
      var planValue = dataTable.getValue(item.row, 1);
      
      // 格式化日期
      function formatDate(date) {
        var d = new Date(date),
          month = '' + (d.getMonth() + 1),
          day = '' + d.getDate(),
          year = d.getFullYear();
        if (month.length < 2) month = '0' + month;
        if (day.length < 2) day = '0' + day;
        return [year, month, day].join('-');
      }
      
      // 同时输出日期和数值
      console.log(`日期: ${formatDate(date)}, 数值: ${planValue}`);
    }
  }
};

关键说明 #

• dataTable.getValue(rowIndex, columnIndex)是Google Charts DataTable的核心API，用于获取指定行和列的数据：
  • 第一个参数item.row是选中项对应的行索引
  • 第二个参数0对应日期列，1对应你定义的plan数值列
• 移除了原代码中冗余的条件判断，只保留item.row != null确保选中项有效
• 格式化日期的逻辑可以直接复用，注意传入正确的日期参数

完整修改后的JavaScript代码 #

google.charts.load("current", {
  packages: ["calendar"]
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn({
    type: 'date',
    id: 'Date'
  });
  dataTable.addColumn({
    type: 'number',
    id: 'plan'
  });
  dataTable.addRows([
    [new Date(2023, 00, 01), 0],
    [new Date(2023, 00, 02), 1],
    [new Date(2023, 00, 03), 12],
    [new Date(2023, 00, 04), 1],
    [new Date(2023, 00, 05), 1],
    [new Date(2023, 00, 06), 16],
    [new Date(2023, 00, 07), 1],
    [new Date(2023, 00, 08), 1],
    [new Date(2023, 00, 09), 1],
    [new Date(2023, 00, 10), 1],
    [new Date(2023, 00, 11), 1],
    [new Date(2023, 00, 12), 1],
    [new Date(2023, 00, 13), 1],
    [new Date(2023, 00, 14), 1],
    [new Date(2023, 00, 15), 1],
    [new Date(2023, 00, 16), 1],
    [new Date(2023, 00, 17), 1],
    [new Date(2023, 00, 18), 1],
    [new Date(2023, 00, 19), 1],
    [new Date(2023, 00, 20), 1],
    [new Date(2023, 00, 21), 1],
    [new Date(2023, 00, 22), 1],
    [new Date(2023, 00, 23), 1],
    [new Date(2023, 00, 24), 1],
    [new Date(2023, 00, 25), 1],
    [new Date(2023, 00, 26), 1],
  ]);
  var chart = new google.visualization.Calendar(document.getElementById('calendar_basic'));

  function selectHandler() {
    var selection = chart.getSelection();
    for (var i = 0; i < selection.length; i++) {
      var item = selection[i];
      if (item.row != null) {
        var date = dataTable.getValue(item.row, 0);
        var planValue = dataTable.getValue(item.row, 1);
        
        function formatDate(date) {
          var d = new Date(date),
            month = '' + (d.getMonth() + 1),
            day = '' + d.getDate(),
            year = d.getFullYear();
          if (month.length < 2) month = '0' + month;
          if (day.length < 2) day = '0' + day;
          return [year, month, day].join('-');
        }
        
        console.log(`日期: ${formatDate(date)}, 数值: ${planValue}`);
      }
    }
  };


  var options = {
    height: 350,
    calendar: {
      dayOfWeekLabel: {
        fontName: 'arial',
        fontSize: 12,
        color: 'black',
        bold: true,
        italic: false,
      },
      monthLabel: {
        fontName: 'arial',
        fontSize: 12,
        color: 'black',
        bold: true,
        italic: false
      },
      monthOutlineColor: {
        stroke: 'black',
        strokeOpacity: 0.8,
        strokeWidth: 2
      },
      unusedMonthOutlineColor: {
        stroke: 'grey',
        strokeOpacity: 0.8,
        strokeWidth: 1
      },
      underMonthSpace: 10,
    },
  };
  google.visualization.events.addListener(chart, 'select', selectHandler);
  chart.draw(dataTable, options);
}

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