如何添加垂直线和注释 Google 时间线图表

Question

我正在使用类似于下面代码片段的 google 时间轴。我希望我的图表看起来像下面的图表。我已经设法让一切正常工作期望如何添加虚线和文本符号。不幸的是，当我搜索注释时，我不断得到 AnnotatedTimeline，这是一个不同的 google 图表。

有没有简单的方法可以做到这一点？

       <html>
      <head>
        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
        <script type="text/javascript">
          google.charts.load('current', {'packages':['timeline']});
          google.charts.setOnLoadCallback(drawChart);
          function drawChart() {
            var container = document.getElementById('timeline');
            var chart = new google.visualization.Timeline(container);
            var dataTable = new google.visualization.DataTable();
    
            dataTable.addColumn({ type: 'string', id: 'President' });
            dataTable.addColumn({ type: 'date', id: 'Start' });
            dataTable.addColumn({ type: 'date', id: 'End' });
            dataTable.addRows([
              [ 'Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
              [ 'Adams',      new Date(1797, 2, 4),  new Date(1801, 2, 4) ],
              [ 'Jefferson',  new Date(1801, 2, 4),  new Date(1809, 2, 4) ]]);
    
            chart.draw(dataTable);
          }
        </script>
      </head>
      <body>
        <div id="timeline" style="height: 180px;"></div>
      </body>
    </html>

Answer 1

我能够通过找到 rects 的位置来让它工作。我首先为要显示的每一行绘制 div。然后在绘制时间线后，我根据矩形的位置重新定位这些 div。由于片段代码中使用了 window 位置，我无法在这里获得一个好的最小工作片段，但我已经非常接近了。在我自己的代码中，我让它工作得很好。

.hline {
            border-left: 5px solid black;
            height: 100px;
            position:absolute;
            visibility:hidden;
            top:144px;
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
      <head>
        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
        
      </head>
      <body>
        <div id="timeline" style="height: 180px;"></div>
        
        
        <div id = "Hline1" class= "hline" > <div style = "position: relative; top:-18px">HLine1</div>
        <div id = "Hline2" class= "hline" > <div style = "position: relative; top:-18px">HLine2</div>
        <div id = "Hline3" class= "hline" > <div style = "position: relative; top:-18px">HLine3</div>
        
        </div>
      </body>
      
      <script>
        var options = {
                          timeline: { showRowLabels: false }
                        };
        const lime="#00ff00" //color for average time
          google.charts.load('current', {'packages':['timeline']});
          google.charts.setOnLoadCallback(drawChart);
          function drawChart() {
            var container = document.getElementById('timeline');
            var chart = new google.visualization.Timeline(container);
            var dataTable = new google.visualization.DataTable();
    
            dataTable.addColumn({ type: 'string', id: 'Project Stage',  });
                dataTable.addColumn({  type: 'string', id: 'Bar'});
                dataTable.addColumn({  type: 'string', role: 'style'});
                dataTable.addColumn({ type: 'date', id: 'Start' });
                dataTable.addColumn({ type: 'date', id: 'End' });
              dataTable.addRows([
                          [ 'Washington','Washington',lime, new Date(1789, 3, 30), new Date(1797, 2, 4) ],
                          [ 'Adams', 'Adams',lime,     new Date(1797, 2, 4),  new Date(1801, 2, 4) ],
                          [ 'Jefferson','Jefferson',lime,  new Date(1801, 2, 4),  new Date(1809, 2, 4) ]]);
                
                        chart.draw(dataTable,options);
                      
          
          
          function redraw (){
            var rects = $('rect') //get all rectangles on plot.
            
            function checkColor(arr){
                var results = [];
                for (let i of arr){
                var colorCheck=$(i).attr('fill')
                var x =$(i).attr('x')
                var width = $(i).attr('width')  
                var x2 =parseFloat(x)+parseFloat(width)
                    
                    if(colorCheck == lime){results.push(x2)}
                    };
                    return results
                };
                
            var linPositions = checkColor(rects) //get x coordinates for vertical lines

            var yStart = $('rect')
            //console.log(linPositions)
            yStart = $(yStart[0]).offset().top;
            xMargin=$("#timeline").offset().left;

    
            
            var yHeight = $('rect')
            yHeight = $(yHeight[0]).attr('height');
            

            var lineNames=['Hline1','Hline2','Hline3']

            
            for (let i = 0; i < linPositions.length; i++) {
                var position = linPositions[i]+xMargin+"px"
                var newTop = i*yHeight + yStart
                
                /* set line information based on current chart positions */
                document.getElementById(lineNames[i]).style.left = position;
                document.getElementById(lineNames[i]).style.visibility = "visible";
                document.getElementById(lineNames[i]).style.top = newTop;
                document.getElementById(lineNames[i]).style.height = yHeight;

            
            };
            
        };  

        redraw()    
        
        function resizeChart () {
            chart.draw(dataTable, options);

        }
        if (document.addEventListener) {
            window.addEventListener('resize', resizeChart);
            window.addEventListener('resize', redraw)
        }
        else if (document.attachEvent) {
            window.attachEvent('onresize', resizeChart);
            window.attachEvent('onresize', redraw);
        }
        else {
            window.resize = resizeChart;
            window.resize = redraw;
        }
    
        
        }
          
        </script>
      
    </html>

如何添加垂直线和注释 Google 时间线图表

How to add vertical lines and annotations Google timeline chart

google-visualization