javascript - Google 时间轴可视化不会更改 slider 交互时的系列行高

Question

所以我有一个时间线，其中包含可以并发的数据......

当我将 ChartRangeSlider 移动到不同的时间范围时，某些时间线条将消失或显示，因为事件时间范围内没有发生任何事情。

这就是时间线和范围 slider 的设置方式。我没有运行任何事件监听器...

       // Configure range slider
        var timelineRangeSlider = new google.visualization.ControlWrapper({
            'controlType': 'ChartRangeFilter',
            'containerId': 'timeline-filter',
            'state': 
            {
                'range': 
                {
                    'start': currentTime,
                    'end':   fourWeek                   
                }
            },
            'options': 
            {
                'filterColumnIndex': 4,
                'ui': 
                {
                    'chartType': 'ScatterChart',
                    'chartOptions': 
                    {
                        'width': '100%',
                        'height': '50',
                        'chartArea': 
                        {
                            'width': '80%', // make sure this is the same for the chart and control so the axes align right
                            'height': '80%'
                        },
                        'hAxis': 
                        {
                            'baselineColor': 'none'
                        }
                    },
                    'chartView': 
                    {
                        'columns': [4,6]
                    }
                }
            }
        });

        // Configure timeline
        var timeline = new google.visualization.ChartWrapper({
            'chartType': 'Timeline',
            'containerId': 'timeline-chart',
            'options': 
            {
                'timeline': 
                {
                    'showBarLabels': false
                },
                'width': '100%',
                'height': '325',
                'tooltip': 
                {
                    'isHtml': true
                },
                'chartArea': 
                {
                    'width': '80%', // make sure this is the same for the chart and control so the axes align right
                    'height': '80%'
                }, 
            },
            'view': 
            {
                'columns': [0,1,2,3,4,5]
            }           
        });

如何阻止这种情况发生，并使四个单独的行(每个系列一个)中的每一行都有一个静态高度，当我与范围 slider 交互时，该高度不会改变？

Answer 1

无论过滤器设置如何，都显示相同的行数，
将过滤器删除的行替换为“空白”行，
这样做需要一些操作

如果您使用仪表板来绑定(bind)图表和过滤器，
独立绘制每个可能会更容易
监听过滤器上的 'statechange' 事件，
知道何时重新绘制图表

使用数据 View 排除过滤器隐藏的行，
在其位置添加空白行
使用时间轴上的colors选项将空白行设置为'transparent'
还对这些行使用空白工具提示

请参阅以下工作片段，了解如何完成此操作的示例...

google.charts.load('current', {
  packages: ['controls', 'timeline']
}).then(function () {
  var dataTable = google.visualization.arrayToDataTable([
    ['Row Label', 'Bar Label', {role: 'tooltip', type: 'string', p: {html: true}}, 'Start', 'End', 'Scatter', 'Data / Blank'],
    ['A', 'Series 0', null, new Date(2018, 1, 1), new Date(2018, 1, 28), 1, 'data'],
    ['B', 'Series 1', null, new Date(2018, 4, 1), new Date(2018, 4, 31), 1, 'data'],
    ['C', 'Series 2', null, new Date(2018, 7, 1), new Date(2018, 7, 31), 1, 'data'],
    ['D', 'Series 3', null, new Date(2018, 10, 1), new Date(2018, 10, 30), 1, 'data']
  ]);

  var blankTooltip = '<div class="hidden"></div>';
  var colorPallette = ['cyan', 'magenta', 'lime', 'yellow'];
  var dateRange = {
    start: dataTable.getColumnRange(3),
    end: dataTable.getColumnRange(4)
  };

  // Configure range slider
  var timelineRangeSlider = new google.visualization.ControlWrapper({
    controlType: 'ChartRangeFilter',
    containerId: 'timeline-filter',

    dataTable: dataTable,

    state: {
      range: {
        start: dateRange.start.min,
        end: dateRange.end.max
      }
    },
    options: {
      filterColumnIndex: 3,
      ui: {
        chartType: 'ScatterChart',
        chartOptions: {
          width: '100%',
          height: '50',
          chartArea: {
            width: '80%',
            height: '80%'
          },
          hAxis: {
            baselineColor: 'none'
          }
        },
        chartView: {
          columns: [3,5]
        }
      }
    }
  });

  google.visualization.events.addListener(timelineRangeSlider, 'statechange', function (props) {
    // filter state
    var state = timelineRangeSlider.getState();

    // wait until statechange has finished
    if (!props.inProgress) {
      // delete previously added blank rows
      var blankRows = dataTable.getFilteredRows([{
        column: 6,
        value: 'blank'
      }]);
      var i = blankRows.length;
      while (i--) {
        dataTable.removeRow(blankRows[i]);
      }

      // add blank rows for non-visible rows
      var blankRows = [];
      var timelineColors = [];
      var visibleRows = dataTable.getFilteredRows([{
        column: 3,
        minValue: state.range.start
      }, {
        column: 4,
        maxValue: state.range.end
      }]);
      for (var i = 0; i < dataTable.getNumberOfRows(); i++) {
        if (visibleRows.indexOf(i) === -1) {
          blankRows.push([
            dataTable.getValue(i, 0),
            dataTable.getValue(i, 1),
            blankTooltip,
            state.range.start,
            state.range.start,
            1,
            'blank'
          ]);
          timelineColors.push('transparent');
        } else {
          timelineColors.push(colorPallette[i]);
        }
      }

      // build timeline view rows
      var lastRowIndex = dataTable.addRows(blankRows);
      var i = blankRows.length;
      while (i--) {
        visibleRows.push((lastRowIndex - i));
      }

      // re-config timeline
      var timelineView = new google.visualization.DataView(dataTable);
      timelineView.setRows(visibleRows);
      timelineView = timelineView.toDataTable();
      timelineView.sort([{column: 0}]);
      timeline.setDataTable(timelineView);
      timeline.setOption('colors', timelineColors);
      timeline.draw();
    }
  });

  timelineRangeSlider.draw();

  // Configure timeline
  var timeline = new google.visualization.ChartWrapper({
    chartType: 'Timeline',
    containerId: 'timeline-chart',

    dataTable: dataTable,

    options: {
      colors: colorPallette,

      timeline: {
        showBarLabels: false
      },
      width: '100%',
      height: '325',
      tooltip: {
        isHtml: true
      },
      chartArea: {
        width: '80%',
        height: '80%'
      }
    },
    view: {
      columns: [0,1,2,3,4]
    }
  });
  timeline.draw();
});

.hidden {
  display: none;
  visibility: hidden;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard_div">
  <div id="timeline-filter"></div>
  <div id="timeline-chart"></div>
</div>