Google Dashboard - chartRangeFilter, wie Sie wissen, wenn Schieberegler bewegen, dann

Question

stoppen kann ich einen Event-Handler zum ChartRangeFilter controlWrapper hinzufügen, um herauszufinden, wenn die Schieber bewegen:

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

und ich habe einen Handler für es:

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

Es funktioniert nicht und ich weiß warum. control.getstate() gibt ein Objekt zurück und ist nicht wirklich was ich will. Ich weiß, es gibt eine Möglichkeit zu überprüfen, ob die Schieberegler "inProgress" sind, aber ich kann nicht herausfinden, was ich darüber gelesen habe. Oder überprüfe ich den Status "Bereit"? Ich möchte die Diagrammdaten nicht neu laden, bis der Schieberegler angehalten wurde, weil ich einen großen Datensatz habe.

Answer 1

die inProgress Eigenschaft auf der zum Event-Handler gesendet Argument

es hat die folgenden Eigenschaften ...

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

folgenden Arbeits Schnipsel sehen ...

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>