javascript - 当用户给出日期并显示在该位置时计算确切日期时出现问题

Question

我正在研究 angularjs google chart API 时间轴图表。 我必须根据用户给出的日期在 h 轴上显示图像。 请找演示https://plnkr.co/edit/aKmf4QkK7AhjJX1eH4J9?p=preview

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

            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的值.底部动态。任何输入都会有所帮助。

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;

    });

Answer 1

你可以使用-->(行数*行高)

并且您想使用 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';