时间戳

首页 > 解决方案 > 如何在 Google 时间线图表上显示截断的文本？

javascript - 如何在 Google 时间线图表上显示截断的文本？

问题描述

当列的名称变得太长时，它不会显示在谷歌时间轴标签列中。可以加宽列或增加高度以进行“溢出时换行”吗？运行代码片段以查看示例。

这可能与以下内容重复：Google Charts Timeline Labels display outside of box

不过，我的问题更加精简，并且有“运行代码片段”。

<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 But his Name is Too Long', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
          [ 'Adams But with  A long Title',      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>


        <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 But his Name is Too Long', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
              [ 'Adams But with  A long Title',      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>

标签： javascripthtmlgoogle-visualization

解决方案

推荐阅读