Question

所以我有一个Google Motion图表，随着时间的推移显示数据。 PHP正在调用数据库来获取图表的数据，数据存储到JS文件中，然后html文件绘制图表（使用js脚本）。

我希望有一个用户输入：

Start (millions):<input class="option" type="text" id="start" name="start" value="<?php echo $start?>"></input> |  
End (millions): <input class="option" type="text" id="end" name="end" value="<?php echo $end?>"></input> |

用户输入将设置图表的x值（以百万计）

HTML和JS SCRIPT绘制图表：

 function dataLoaded(myData) {

  };

  google.load('visualization', '1', {'packages':['motionchart']});
  google.setOnLoadCallback(drawChart);
var control = new google.visualization.ControlWrapper({
 'controlType': 'ChartRangeFilter',

 'options': {
   // Filter by the date axis.
   'filterColumnIndex': 0,
   'ui': {
     'chartType': 'MotionChart',
     'chartOptions': {
       'chartArea': {'width': '90%'},
     },
   }
 },

   });

  function drawChart() {
      // alert("dataLoaded called");
  var chartData = new google.visualization.DataTable();
      chartData.addColumn('number', 'Moving Avg Volume');


      chartData.addRows(chartDataRows);

      var upOptions = {};
      upOptions['state'] = {"playDuration":15000,"orderedByY":false,"iconType":"VBAR","yAxisOption":"6","nonSelectedAlpha":0.4,"yZoomedDataMin":0,"showTrails":false,"yZoomedDataMax":2.2,"xAxisOption":"6","iconKeySettings":[],"duration":{"multiplier":1,"timeUnit":"D"},"xZoomedDataMin":0,"yLambda":1,"yZoomedIn":false,"uniColorForNonSelected":false,"xZoomedIn":false,"dimensions":{"iconDimensions":["dim0"]},"orderedByX":true,"sizeOption":"_UNISIZE","xZoomedDataMax":122,"xLambda":1,"colorOption":"4"};
      upOptions['width'] = 900;
      upOptions['height'] = 600;

      var upchart = new google.visualization.MotionChart(document.getElementById('who_up_chart'));
      upchart.draw(chartData, upOptions);

 var downOptions = {};
    downOptions['state'] = {"playDuration":15000,"orderedByY":false,"iconType":"VBAR","yAxisOption":"5","nonSelectedAlpha":0.4,"yZoomedDataMin":0,"showTrails":false,"yZoomedDataMax":24000,"xAxisOption":"5","iconKeySettings":[],"duration":{"multiplier":1,"timeUnit":"D"},"xZoomedDataMin":0,"yLambda":1,"yZoomedIn":false,"uniColorForNonSelected":false,"showXScalePicker":true,"xZoomedIn":false,"dimensions":{"iconDimensions":["dim0"]},"orderedByX":true,"showYMetricPicker":true,"sizeOption":"_UNISIZE","xZoomedDataMax":122,"xLambda":1,"colorOption":"4"};
  downOptions['width'] = 900;
  downOptions['height'] = 600;
      var downchart = new google.visualization.MotionChart(document.getElementById('who_down_chart'));
     downchart.draw(chartData, downOptions);

      document.getElementById('loading').innerHTML='';
  }

我的X轴是从0到100,000,000，因此如果用户输入1,000,000到5,000,000，我希望图表重绘并仅显示这些点。

Answer 1

我认为你要找的是DataView。 DataView就像一个界面，可以在不实际更改数据的情况下更改您在DataTable中查看数据的方式。

var data = new google.visualization.DataTable();
var options = {
    //set your options
}

//Load Your Data Here.

var view = new google.visualization.DataView(data);
view.setRows(view.getFilteredRows([{column: 0, minValue: minTime, maxValue: maxTime}]);
var chart = new google.visualization.MotionChart(document.getElementById('chart_div'));
chart.draw(view, options)

我还注意到你在开头声明了ChartRangeFilter控件。要将其绑定到图表，两者都需要成为google.visulization的一部分。Dashboard。我无法确定MotionChart是否能够与控件绑定，但您可以试一试并找出。

用户输入后重绘谷歌

1 个答案: