javascript - Google Dashboard - chartRangeFilter，如何知道 slider 控件何时移动，然后停止

Question

我可以将事件处理程序添加到 ChartRangeFilter controlWrapper 以查明 slider 何时移动:

google.visualization.events.addListener(control, 'statechange', selectHandler);

我有一个处理程序:

function selectHandler(e){

    var state = control.getState();

    console.log(state);

    if (state != 'inProgress') {
            currentLeftSliderPos = control.getState().range.start;
            currentRightSliderPos = control.getState().range.end;

            console.log(currentLeftSliderPos);
            console.log(currentRightSliderPos);
    }
} 

它不起作用，我知道为什么。 control.getstate() 返回一个对象，这并不是我真正想要的。我知道有一种方法可以检查 slider 是否“进行中”，但我无法从我阅读的内容中弄清楚如何做到这一点。还是检查“就绪”状态？我不想在 slider 停止之前重新加载图形数据，因为我有一个大数据集。

Answer 1

在发送到事件处理程序的参数上使用 inProgress 属性

它具有以下属性...

{
  "inProgress": false,
  "startChanged": true,
  "endChanged": false
}

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

google.charts.load('current', {
  callback: drawDashboard,
  packages: ['corechart', 'controls']
});

function drawDashboard() {
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'x');
  data.addColumn('number', 'y0');
  data.addRows([
    [new Date(2017, 6, 12), 9],
    [new Date(2017, 6, 13), 8],
    [new Date(2017, 6, 14), 10],
    [new Date(2017, 6, 15), 8],
    [new Date(2017, 6, 16), 22],
    [new Date(2017, 6, 17), 25],
    [new Date(2017, 6, 18), 24],
    [new Date(2017, 6, 19), 14],
    [new Date(2017, 6, 20), 12],
    [new Date(2017, 6, 21), 8],
    [new Date(2017, 6, 22), 9],
    [new Date(2017, 6, 23), 4]
  ]);

  var dashboard = new google.visualization.Dashboard(
    document.getElementById('dashboard')
  );

  var chart = new google.visualization.ChartWrapper({
    chartType: 'AreaChart',
    containerId: 'chart'
  });

  var control = new google.visualization.ControlWrapper({
    controlType: 'ChartRangeFilter',
    containerId: 'control',
    options: {
      filterColumnIndex: 0
    }
  });

  google.visualization.events.addListener(control, 'statechange', function (eventArgs) {
    document.getElementById('info').innerHTML = 'control is moving = ' + eventArgs.inProgress;
  });

  dashboard.bind(control, chart);
  dashboard.draw(data);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard">
  <div id="chart"></div>
  <div id="control"></div>
</div>
<div id="info"></div>