在h轴上突出显示当前日期

Question

我正在使用谷歌图表API绘制时间表图表。我想在h轴上突出显示或显示图片以表示当前日期。

请查看演示：https://plnkr.co/edit/Uff1PeGgg8DUGlpnALLV?p=preview

以下是我从后端动态获取的日期，我需要在特定日期的h轴上显示图像。

    var date1 = new Date(2018,2,22);
    var date2 = new Date(2018,5,15);
    var date3 = new Date(2018,6,1);

js code：

angular.module('myApp', ['googlechart'])
  .controller('myController', function($scope) {
    var chart1 = {};
    chart1.type = "Timeline";
    chart1.displayed = false;
    chart1.data = {
      "cols": [{
        id: "month", 
        label: "id",
        type: "string"
      }, {
        id: "name",
        label: "Name",
        type: "string"
      }, {
        id: "date1",
        label: "start",
        type: "date"
      }, {
        id: "date2",
        label: "end",
        type: "date"
      }],
      "rows": [{
        c: [{
          v: "1004"
        }, {
          v: "Name1",
        }, {
          v: new Date(2017, 11, 11)
        }, {
          v:new Date(2018, 3, 12)
        } ]
      }, {
        c: [{
          v: "1089"
        }, {
          v: "Name2"
        }, {
           v: new Date(2018,4, 1)
         }, {
          v: new Date(2018, 4, 15)
        } ]
      } , {
        c: [{
          v: "1066"
        }, {
          v: "Name3"
        }, {
           v: new Date(2018,5, 1)
         }, {
          v: new Date(2018, 7, 15)
        } ]
      } , {
        c: [{
          v: "10"
        }, {
          v: "Name4"
        }, {
           v: new Date(2018, 7, 1)
         }, {
          v: new Date(2018, 7, 15)
        } ]
      } , {
        c: [{
          v: "june"
        }, {
          v: "Name5"
        }, {
           v: new Date(2018,6, 1)
         }, {
          v: new Date(2018, 6, 15)
        } ]
      }  ]
    };

 chart1.options = {
        timeline: {
            showRowLabels: false,
            colorByRowLabel: false,
            barLabelStyle: { fontSize: 14 ,bold:true}
        },
    colors:['#7EAE5A','#0E77B4'],
    backgroundColor: 'transparent'
    };
    //below are the 3 dates which i get dynamically and i need to show image on h-axis on that dates.
var date1 = new Date(2018,2,22);
var date2 = new Date(2018,5,15);
var date3 = new Date(2018,6,1);

     $scope.selected = function(selectedItem) {
       addMarker(new Date());
       }


    function addMarker(markerDate) {
    var baseline;
    var baselineBounds;
    var chartElements;
    var markerLabel;
    var markerLine;
    var markerSpan;
    var svg;
    var timeline;
    var timelineUnit;
    var timelineWidth;
    var timespan;

    baseline = null;
    timeline = null;
    svg = null;
    markerLabel = null;
    chartElements = container.getElementsByTagName('svg');
    if (chartElements.length > 0) {
      svg = chartElements[0];
    }
    chartElements = container.getElementsByTagName('rect');
    if (chartElements.length > 0) {
      timeline = chartElements[0];
    }
    chartElements = container.getElementsByTagName('path');
    if (chartElements.length > 0) {
      baseline = chartElements[0];
    }
    chartElements = container.getElementsByTagName('text');
    if (chartElements.length > 0) {
      markerLabel = chartElements[0].cloneNode(true);
    }
    if ((svg === null) || (timeline === null) || (baseline === null) || (markerLabel === null) ||
        (markerDate.getTime() < dateRangeStart.min.getTime()) ||
        (markerDate.getTime() > dateRangeEnd.max.getTime())) {

      return;
    }

    // calculate placement
    timelineWidth = parseFloat(timeline.getAttribute('width'));
    baselineBounds = baseline.getBBox();
    timespan = dateRangeEnd.max.getTime() - dateRangeStart.min.getTime();
    timelineUnit = (timelineWidth - baselineBounds.x) / timespan;
    markerSpan = markerDate.getTime() - dateRangeStart.min.getTime();

    // add label
    markerLabel.setAttribute('fill', '#e91e63');
    markerLabel.setAttribute('y', options.height);
    markerLabel.setAttribute('x', (baselineBounds.x + (timelineUnit * markerSpan) - 4));
    markerLabel.textContent = formatDate.formatValue(markerDate);
    svg.appendChild(markerLabel);

    // add line
    markerLine = timeline.cloneNode(true);
    markerLine.setAttribute('y', 0);
    markerLine.setAttribute('x', (baselineBounds.x + (timelineUnit * markerSpan)));
    markerLine.setAttribute('height', options.height);
    markerLine.setAttribute('width', 1);
    markerLine.setAttribute('stroke', 'none');
    markerLine.setAttribute('stroke-width', '0');
    markerLine.setAttribute('fill', '#e91e63');
    svg.appendChild(markerLine);
  }
    $scope.myChart = chart1;

  });

参考链接：vertical reference line in google timeline visualization

我指的是上面的链接，但没有运气。有关如何在当前日期和其他用户定义的日期找到精确坐标以显示图像或在h轴上突出显示的输入。我得到的数据是动态的，所以我不能给出一个恒定的静态值来显示图像或突出显示。