Question

我可以向ChartRangeFilter controlWrapper添加一个事件处理程序，以找出滑块移动的时间：

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()返回一个对象并不是我想要的。我知道有一种方法可以检查滑块是否在进行中，但是我无法从我所读到的如何做到这一点中找到答案。或者，我是否准备好了“准备好”。状态？我不想重新加载图表数据，直到滑块停止，因为我有一个大型数据集。

Answer 1

在发送给事件处理程序

的参数上使用inProgress属性

它具有以下属性......

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

请参阅以下工作代码段...

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

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

1 个答案: