Javascript 如何将自定义标记添加到Google时间线图表？

我想在谷歌时间线图上添加标记，如下所示

---

我目前正在遵循此处给出的解决方案：。但是，这里需要一个时间线元素，只有这样标记才能出现在它上面。但是，我想要一种方法，可以添加一个标记，而不必在该行的该位置有任何时间线数据。是否有用于在Google timeline中添加标记的内置功能，或不需要添加虚拟时间线的自定义方式。

没有用于添加标记的内置功能。
由于您引用的答案是自定义解决方案，
我们可以根据需要修改解决方案

我们不一定需要时间线元素来放置标记。
但我们确实需要数据来绘制时间线，
在上面放置标记

开箱即用，时间线将x轴限制在数据中找到的日期范围内

但我们可以设置自定义x轴范围，使其更大，
并为没有时间线元素的标记留出更多空间

hAxis: {
  minValue: dateRangeStart,
  maxValue: dateRangeEnd,
}

请参阅以下工作片段

google.charts.load（'current'{
软件包：[“时间线”]
}).然后（函数（）{
var container=document.getElementById（'timeline'）；
var chart=newgoogle.visualization.Timeline（容器）；
var dataTable=new google.visualization.dataTable（）；
addColumn（{type:'string'，id:'Row'}）；
addColumn（{type:'string'，id:'Bar'}）；
addColumn（{type:'date'，id:'Start'}）；
addColumn（{type:'date'，id:'End'}）；
变量currentYear=（新日期（））.getFullYear（）；
dataTable.addRows([
[“第1行”，“A-1”，新日期（当前年份，0，1），新日期（当前年份，2，31）]，
['第1行'，'A-2'，新日期（当前年份，3，1），新日期（当前年份，5，30）]，
[“第2行”，“B-1”，新日期（本年度，6，1），新日期（本年度，8，31）]，
[‘第2行’、‘B-2’、新日期（当前年份，9,1）、新日期（当前年份，11,31）]
]);
var dataTableGroup=google.visualization.data.group（dataTable[0]）；
var dateRangeStart=新日期（当前年份-1,0,1）；
var dateRangeEnd=新日期（当前年份+1,11,31）；
var行高=44；
变量选项={
高度：（dataTableGroup.getNumberOfRows（）*rowHeight）+rowHeight，
哈克斯：{
minValue:dateRangeStart，
maxValue:dateRangeEnd，
}
};
函数绘图图（）{
图表绘制（数据表、选项）；
}
//添加自定义标记
函数addMarkers（事件）{
var基线；
var基线边界；
风险价值要素；
var labelFound；
var-labelText；
var标记；
var-markerLabel；
var-markerSpan；
var-rowLabel；
var-svg；
var-svgNS；
var时间线；
var时间线单位；
var时间线宽度；
var时间跨度；
var xCoord；
var yCoord；
//初始化图表元素
基线=零；
svg=null；
svgNS=null；
时间线=空；
chartElements=container.getElementsByTagName（'svg'）；
如果（chartElements.length>0）{
svg=图表元素[0]；
svgNS=svg.namespaceURI；
}
chartElements=container.getElementsByTagName（'rect'）；
如果（chartElements.length>0）{
时间线=图表元素[0]；
}
chartElements=container.getElementsByTagName（'path'）；
如果（chartElements.length>0）{
基线=图表元素[0]；
}
如果（（svg==null）| |（时间轴==null）| |（基线==null））{
返回；
}
timelineWidth=parseFloat（timeline.getAttribute（'width'）；
baselineBounds=baseline.getBBox（）；
timespan=dateRangeEnd.getTime（）-dateRangeStart.getTime（）；
timelineUnit=（timelineWidth-baselineBounds.x）/timespan；
//添加事件
events.forEach（函数（事件）{
//查找行标签
rowLabel=dataTable.getValue（event.row，0）；
chartElements=container.getElementsByTagName（'text'）；
如果（chartElements.length>0）{
Array.prototype.forEach.call（图表元素、函数（标签）{
if（label.textContent.indexOf（“…”）>-1）{
labelText=label.textContent.replace（“…”，“”）；
}否则{
labelText=label.textContent；
}
if（rowLabel.indexOf（labelText）>-1）{
markerLabel=label.cloneNode（true）；
}
});
}
//计算位置
markerSpan=event.date.getTime（）-dateRangeStart.getTime（）；
//添加标签
markerLabel.setAttribute（'text-anchor'，'start'）；
markerLabel.setAttribute（'fill'，event.color）；
markerLabel.setAttribute（'x'，（baselineBounds.x+（timelineUnit*markerSpan）+6））；
markerLabel.textContent=event.name；
appendChild（markerLabel）；
//添加标记
xCoord=（baselineBounds.x+（timelineUnit*markerSpan）-4）；
yCoord=parseFloat（markerLabel.getAttribute（'y'）；
开关（事件类型）{
案例“三角形”：
marker=document.createElements（svgNS，“polygon”）；
setAttribute（'fill'，'transparent'）；
marker.setAttribute（'stroke'，event.color）；
marker.setAttribute（'stroke-width'，'3'）；
setAttribute（'points'，xCoord+'，'+（yCoord-10）+'+“（xCoord-5）+'，'+yCoord++'+（xCoord+5）+'，'+yCoord）；
appendChild（marker）；
打破
案例“循环”：
marker=document.createElements（svgNS，'circle'）；
marker.setAttribute（'cx'，xCoord）；
marker.setAttribute（'cy'，yCoord-5）；
marker.setAttribute（'r'，'6'）；
marker.setAttribute（'stroke'，event.color）；
marker.setAttribute（'stroke-width'，'3'）；
setAttribute（'fill'，'transparent'）；
appendChild（marker）；
打破
}
});
}
google.visualization.events.addListener（图表'ready'，函数（）{
添加标记([
{行：0，日期：新日期（当前年份-1,1,11），名称：'Event 1'，类型：'triangle'，颜色：'red'}，
{世界其他地区：1，