使用 react-google-charts 中的时间线显示空行

Question

我正在使用 react-google-charts 中的时间线图表，但不知道如何显示没有可用数据的空行。

在图片中，您看到只显示了星期五（我有数据的那一天）。但是我也想显示星期一到星期四。

我可以添加空的虚拟行（下图），但即使持续时间为 0，它们也会显示一个条。我希望没有可用数据的行完全为空。

我试图在每一行中包含一个虚拟条目并使其透明。但我只能将整行设置为透明，这对我没有帮助。

你有什么提示吗？

Answer 1

在这里，我使用 colors 选项使 Adams 行透明。

EDIT -- 要使单个条透明，请添加唯一的条标签。

如果需要，您可以使用选项 timeline.showBarLabels 隐藏栏标签...

请参阅以下工作片段...

<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: 'string', id: 'Category' });
        dataTable.addColumn({ type: 'date', id: 'Start' });
        dataTable.addColumn({ type: 'date', id: 'End' });
        dataTable.addRows([
          [ 'Washington', 'A', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
          [ 'Adams', 'B',      new Date(1797, 2, 4),  new Date(1797, 2, 4) ],
          [ 'Adams', 'C',      new Date(1798, 0, 1),  new Date(1802, 1, 18) ],
          [ 'Jefferson', 'D',  new Date(1801, 2, 4),  new Date(1809, 2, 4) ]]);

        chart.draw(dataTable, {
          colors: ['red', 'transparent', 'blue', 'green'],
          timeline: {showBarLabels: false}
        });
      }
    </script>
  </head>
  <body>
    <div id="timeline" style="height: 180px;"></div>
  </body>
</html>

编辑 2

因为透明不是使用 React 的有效颜色字符串，
您可以使用样式列角色，而不是颜色选项。

要使栏透明，请设置 opacity: 0;。

请参阅以下工作片段...

<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: 'string', id: 'Category' });
        dataTable.addColumn({ type: 'string', role: 'style' });
        dataTable.addColumn({ type: 'date', id: 'Start' });
        dataTable.addColumn({ type: 'date', id: 'End' });
        dataTable.addRows([
          [ 'Washington', 'A', 'red', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
          [ 'Adams', 'B',      'opacity: 0;', new Date(1797, 2, 4),  new Date(1797, 2, 4) ],
          [ 'Adams', 'C',      'blue', new Date(1798, 0, 1),  new Date(1802, 1, 18) ],
          [ 'Jefferson', 'D',  'green', new Date(1801, 2, 4),  new Date(1809, 2, 4) ]]);

        chart.draw(dataTable, {
          timeline: {showBarLabels: false}
        });
      }
    </script>
  </head>
  <body>
    <div id="timeline" style="height: 180px;"></div>
  </body>
</html>

使用 react-google-charts 中的时间线显示空行

Display empty row using timeline from react-google-charts

charts

google-visualization

reactjs