Javascript 当用户给出日期并显示在该位置时，计算准确日期时出现问题

我正在研究angularjs谷歌图表API时间线图表。 我必须根据用户给出的日期在h轴上显示图像。 请找到演示

下面是用于将日期传递给函数的代码，该函数计算并显示图像

            var overlay;
            var overlayCount = overlays.length;
          // remove existing overlays
            while (overlayCount--) {
                overlay = overlays[overlayCount];
                if (overlay !== null) {
                    container.removeChild(overlay);
                }
                overlays.splice(overlayCount, 1);
            }
            overlays.push(setOverlay(new Date(2018,7, 8)));
            overlays.push(setOverlay(new Date(2018, 6, 9)));

            overlays.push(setOverlay(new Date(2018,6, 8)));
            overlays.push(setOverlay(new Date(2018, 5, 9)));

它在由

overlay.style.bottom

指定的位置显示图像，当动态获取的记录数或多或少时，该操作失败。如何动态计算和分配overlay.style.bottom的值。任何投入都会有帮助

js代码：

angular.module('myApp', ['googlechart'])
    .controller('myController', function($scope,$timeout) {
        var chart1 = {};
        chart1.type = "Timeline";
        chart1.displayed = false;
        var container = document.getElementById('timeline')
        chart1.data = {
            "cols": [{
                id: "month",
                label: "Month",
                type: "string"
            }, {
                id: "laptop-id",
                label: "Laptop",
                type: "string"
            }, {
                id: "desktop-id",
                label: "start",
                type: "date"
            }, {
                id: "server-id",
                label: "end",
                type: "date"
            }],
            "rows": [{
                c: [{
                    v: "January"
                }, {
                    v: "text here",
                }, {
                    v: new Date(2018, 3, 1),p: {id: 1001}
                }, {
                    v:new Date(2018, 4, 12)
                } ]
            },{
                c: [{
                    v: "January"
                }, {
                    v: "text here",
                }, {
                    v: new Date(2018,4, 15),p: {id: 1002}
                }, {
                    v:new Date(2018, 4, 22)
                } ]
            },{
                c: [{
                    v: "January"
                }, {
                    v: "text here",
                }, {
                    v: new Date(2018, 5, 1),p: {id: 1003}
                }, {
                    v:new Date(2018, 5, 12)
                } ]
            }, {
                c: [{
                    v: "February"
                }, {
                    v: "feb text here"
                }, {
                    v: new Date(2018,4, 1),p: {id: 1004}
                }, {
                    v: new Date(2018, 4, 15)
                } ]
            } , {
                c: [{
                    v: "april"
                }, {
                    v: "april text here"
                }, { 
                    v: new Date(2018,5, 1),p: {id: 1005}
                }, {
                    v: new Date(2018, 7, 15)
                } ]
            } , {
                c: [{
                    v: "may"
                }, {
                    v: "may text here"
                }, {
                    v: new Date(2018, 7, 1),p: {id: 1006}
                }, {
                    v: new Date(2018, 8, 15)
                } ]
            } , {
                c: [{
                    v: "june"
                }, {
                    v: "some text here"
                }, { 
                    v: new Date(2018,6, 1),p: {id: 1007}
                }, {
                    v: new Date(2018, 6, 10)
                } ]
            },{
                c: [{
                    v: "june"
                }, {
                    v: "some text here"
                }, {
                    v: new Date(2018,6, 15),p: {id: 1008}
                }, {
                    v: new Date(2018, 6, 22)
                } ]
            }  ]
        };
        chart1.options = {
            timeline: {
                showRowLabels: false,
            },
        };

        $timeout(function(){
            $scope.selected();
        }, 1000);
        $scope.selected = function(selectedItem) {
          var numberOfRows = chart1.data.rows.length;
        //  alert("rows length : " + numberOfRows);
       }

        $scope.myChart = chart1;

    });

您可以使用-->（行数*行高）

您希望使用

overlay.style.top

而不是

bottom

bottom

将从页面底部定位像素覆盖

替换

overlay.style.bottom =315 + 'px';

与

overlay.style.top = ((chart1.data.rows.length * 42) + 8) + 'px';

42

是近似的行高

8

是示例中图像高度的一半

编辑

由于时间线按行标签分组，
您可以使用数组保存不同的标签，
然后使用数组的长度作为高度

    var groupRows = [];
    chart1.data.rows.forEach(function (row) {
      if (groupRows.indexOf(row.c[0].v) === -1) {
        groupRows.push(row.c[0].v);
      }
    });
    overlay.style.top = ((groupRows.length * 42) + 8) + 'px';

---

由于-->

overlay.style.bottom=315+'px'，图像始终位于同一位置是否有一种方法可以动态计算overlay.style.bottom，因为我获得的数据是动态的，如果我给出静态值，图像位置将发生变化，请查找示例演示，感谢您的输入。我想知道如果我们有多行显示在同一行中，因为它具有相同的ID，那么在我的场景中它将失败，因为我必须知道在特定像素处分配图像的确切行数（（chart1.data.rows.length*42）+8）+“px”）。请查找更新的链接。它有8个数据行显示在图表上，但在图表上显示为5行，因为我的数据是动态的，我如何知道这些行在该图表上显示为5行。请提供建议。您可以使用分组id并从结果数据表中获取行数…您可以建议如何使用group（）方法分组id。我仍在搜索此解决方案。不要认为
group（）
方法对您有效，您必须使用
google.visualization
，请参见上面的编辑…这个问题运气好吗？