时间戳

首页 > 解决方案 > 使用 react-google-charts 中的时间线显示空行

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

问题描述

我正在使用 react-google-charts 中的时间线图，但无法弄清楚如何显示没有可用数据的空行。

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

在此处输入图像描述

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

在此处输入图像描述

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

你有什么提示吗？

标签： reactjschartsgoogle-visualization

解决方案

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

编辑——要使单个条形透明，添加独特的条形标签。

如果需要，您可以使用选项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

由于透明不是使用反应的有效颜色字符串，
您可以使用样式列角色，而不是颜色选项。

要使栏透明，请设置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>

推荐阅读