更改Google圖表中的圖表範圍過濾器的值

Question

``enter image description here我有一個折線圖的兩個圖表範圍過濾器。一個是日期和第二個是時間。首先我想從日期範圍過濾器中選擇日期，比我想要的其他圖表範圍滑塊相對於第一個滑塊的值更改。或者我可以如何設置圖表範圍過濾器的「hAxis」值。提前致謝 。

var controll = new google.visualization.ControlWrapper({ 
       controlType: 'ChartRangeFilter', 
       containerId: 'control_div1', 
       options: { 

        filterColumnIndex: 0, 

        ui: { 
         chartOptions: { 
          height: 50, 
          labelStacking: 'vertical', 

          chartArea: { 
           width: '80%', 
          }, 

          'hAxis': { 'baselineColor': 'none', format: "dd MMM yyyy" } 


         } 
        } 
       }, 
       state: { 
        range: { 
         start: new Date(2017, 5, 8, 20, 00, 00, 00), 
         end: new Date(2017, 5, 8, 20, 50, 00, 00) 

         //state: { lowValue: new Date(2017, 5, 5, 20, 00, 00, 00), 
         // highValue: new Date(2017, 5, 13, 20, 50, 00, 00) } 
        } 

       } 
      }); 

和第二控制包裝物以下對時間變化

var control = new google.visualization.ControlWrapper({ 
     controlType: 'ChartRangeFilter', 
     containerId: 'control_div', 
     options: { 

      filterColumnIndex: 0, 

      ui: { 
       chartOptions: { 
        height: 50, 

        chartArea: { 
         width: '80%', 
        }, 

        'hAxis': { 'baselineColor': 'none', format: " hh:mm:ss" } 



       } 
      } 
     }, 


    }); 

Answer 1

偵聽所述第一控制的'statechange'事件，

然後使用state屬性值來設置在所述第二範圍內的

請務必在設定狀態後重新繪製控制...

google.visualization.events.addListener(controlDate, 'statechange', function() { 
    var stateDate = controlDate.getState(); 
    controlTime.setState({ 
    range: { 
     start: stateDate.range.start, 
     end: stateDate.range.end 
    } 
    }); 
    controlTime.draw(); 
}); 

---

看到下面的工作片段...

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

 
function drawChart() { 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('date', 'TimeStamp'); 
 
    data.addColumn('number', 'Value'); 
 
    data.addRow([new Date('05/03/2016 12:00:19'), 0]); 
 
    data.addRow([new Date('05/03/2016 12:01:31'), 1]); 
 
    data.addRow([new Date('05/03/2016 12:02:43'), 2]); 
 
    data.addRow([new Date('05/03/2016 12:32:01'), 3]); 
 
    data.addRow([new Date('05/03/2016 12:33:14'), 4]); 
 
    data.addRow([new Date('06/03/2016 11:50:42'), 5]); 
 
    data.addRow([new Date('06/03/2016 11:51:57'), 6]); 
 
    data.addRow([new Date('06/03/2016 11:53:11'), 7]); 
 
    data.addRow([new Date('06/03/2016 11:54:25'), 8]); 
 
    data.addRow([new Date('06/03/2016 11:55:39'), 9]); 
 
    data.addRow([new Date('07/03/2016 15:43:50'), 10]); 
 
    data.addRow([new Date('07/03/2016 15:45:02'), 11]); 
 
    data.addRow([new Date('07/03/2016 15:46:14'), 12]); 
 
    data.addRow([new Date('07/03/2016 15:47:26'), 13]); 
 

 
    var controlDate = new google.visualization.ControlWrapper({ 
 
    controlType: 'ChartRangeFilter', 
 
    containerId: 'control-date', 
 
    options: { 
 
     filterColumnLabel: 'TimeStamp', 
 
     ui: { 
 
     chartOptions: { 
 
      hAxis: { 
 
      format: 'dd MMM yyyy' 
 
      } 
 
     } 
 
     } 
 
    } 
 
    }); 
 

 
    google.visualization.events.addListener(controlDate, 'statechange', function() { 
 
    var stateDate = controlDate.getState(); 
 
    controlTime.setState({ 
 
     range: { 
 
     start: stateDate.range.start, 
 
     end: stateDate.range.end 
 
     } 
 
    }); 
 
    controlTime.draw(); 
 
    }); 
 

 
    var controlTime = new google.visualization.ControlWrapper({ 
 
    controlType: 'ChartRangeFilter', 
 
    containerId: 'control-time', 
 
    options: { 
 
     filterColumnLabel: 'TimeStamp', 
 
     ui: { 
 
     chartOptions: { 
 
      hAxis: { 
 
      format: 'hh:mm:ss' 
 
      } 
 
     } 
 
     } 
 
    } 
 
    }); 
 

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

 
    var dash = new google.visualization.Dashboard(document.getElementById('dashboard')); 
 
    dash.bind([controlDate, controlTime], [chart]); 
 
    dash.draw(data); 
 
}

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