如何在Google图表日历中获取所选日期的div

Question

我使用谷歌图表日历，我想知道如何操纵选定的日期。我可以通过使用select：

的监听器来选择'row'和'date'

google.visualization.events.addListener(chart, 'select', function() {
    console.log(chart.getSelection()[0].date)
    console.log(chart.getSelection()[0].row)
});

这是官方documentation。

1. 如何使用“行”找到包含所选日期的div？
2. 我的目标是操纵它并在接下来的5天内添加其他颜色，如下所示：
3. 我还希望在点击后显示工具提示，我在悬停时克隆当前工具提示，但我的意图是获取所选的div而不是行

Answer 1

日历上的每个日期都由svg <rect>元素表示 其高度和宽度属性为16

$('#chart_div rect[width="16"][height="16"]')

找到所选元素，计算年份的日期编号（1-366），
您可以使用以下答案中找到的功能来计算日期编号...
calculate the day of the year (1 - 366)

然后使用jquery来获取元素......

var selection = chart.getSelection();
if (selection.length > 0) {
  var dayNumber = new Date(selection[0].date).getDOY();
  var selectedRect = $('#chart_div rect[width="16"][height="16"]').get(dayNumber);
}

务必检查选择的长度，
删除选择时也会触发事件，
这会导致失败 - ＆gt; selection[0]

注意：图表可能不允许您更改所选元素的样式，
因为它会根据选项覆盖任何样式 - ＆gt; calendar.focusedCellColor
但你绝对可以改变所选元素后面的5个元素，
使用 - ＆gt; dayNumber + 1 - 等等......