在用户输入后重新绘制谷歌

Redraw google after user input

本文关键字：绘制 谷歌 新绘制 用户 输入      更新时间：2023-09-26

所以我有一个显示数据随时间变化的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脚本:

 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，我希望图表重新绘制并只显示这些点。

我认为你正在寻找的是一个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. visualization . dashboard的一部分。我无法确定MotionChart是否能够与控件绑定，但您可以尝试一下并找出

相关文章：