javascript - 使用 JavaScript 触发 Google 可视化 StringFilter

标签 javascript jquery google-visualization

如何使用 JavaScript 或 jQuery 触发以下 Google StringFilter 进行更新？

我能够使用 JavaScript/jQuery 用文本“GS”填充 StringFilter 输入框。

let element = $('#div_categoryPicker1_A input'); element.focus().val('GS');

预期行为是仪表板更新。然而，这并没有发生。我尝试使用“按键”事件，但没有成功。

什么事件触发器是正确的方法？

预先感谢您的指导。

google.charts.load('current', {
  'packages': ['corechart', 'table', 'gauge', 'controls', 'charteditor']
});

$(document).ready(function() {
  //console.log("ready!");    
  renderChart_onPageLoad();
  document.getElementById("myBtn").addEventListener("click", setStringFilter);
});

function setStringFilter() {
  console.log('setStringFilter executed');
  let element = $('#div_categoryPicker1_A input');

  var e = $.Event("keypress", {
    which: 13
  });
  //element.attr('value', 'GS').trigger(e);
  element.focus().val('GS');
  element.trigger(e);
}


function renderChart_onPageLoad() {
  google.charts.setOnLoadCallback(function() {
    drawTable();
  }); //END setOnLoadCallback
} //END function renderChart_onEvent

function drawTable() {
  var jsonArray = jsonDataArray_1to1(json);

  //Modify header row to include id and label
  jsonArray = arrayHeaderRow_id_label_date(jsonArray);
  //console.log('jsonArray');
  //console.log(jsonArray);

  var data = google.visualization.arrayToDataTable(jsonArray, false); // 'false' means that the first row contains labels, not data.
  //console.log('data');
  //console.log(data);

  var dashboard = new google.visualization.Dashboard(document.getElementById('div_dashboard_A'));

  var categoryPicker1 = new google.visualization.ControlWrapper({
    'controlType': 'StringFilter',
    'containerId': 'div_categoryPicker1_A',
    'matchType': 'any',
    'options': {
      'filterColumnIndex': 0, //Column used in control
      'ui': {
        //'label': 'Actual State:',
        //'labelSeparator': ':',
        'labelStacking': 'vertical',
        'selectedValuesLayout': 'belowWrapping',
        'allowTyping': false,
        'allowMultiple': false,
        'allowNone': true
      }
    }
  });

  var table = new google.visualization.ChartWrapper({
    chartType: 'Table',
    containerId: 'div_table_A',
    options: {
      allowHtml: true,
      page: 'enable',
      pageSize: '3'
    }
  });

  dashboard.bind([categoryPicker1], [table]);
  dashboard.draw(data);


  //Responsive chart size when browser window size changes
  window.addEventListener('resize', function() {
    dashboard.draw(data);
  }, false);

}

//Library

function jsonDataArray_1to1(json) {
  //DYNAMIC JSON ARRAY

  var dataArray_cln = [];

  //A. The desired table requires the fixed columns of ..... to ..... these are directly taken from the JSON.
  var dataArray_keys = Object.keys(json[0]);

  dataArray_cln.push(dataArray_keys);

  //Add rows 1 to json.length with null values
  var dataArray_rows = json.length;
  var dataArray_cols = dataArray_keys.length;

  for (i = 0; i < dataArray_rows; i++) {
    dataArray_cln.push(Array(dataArray_cols).fill(null));
  }

  //Update array from json data
  for (i = 0; i < dataArray_rows; i++) {
    //[i + 1] because row 0 is the header, push begins with row 1
    //dataArray_cln[row][col]

    //Content in row "i" is positioned into dataArray_cln[row][col] incrementing "j" to pull each key name from dataArray_keys
    for (var j = 0; j < dataArray_keys.length; j++) {
      eval('dataArray_cln[i + 1][' + j + '] = json[i].' + dataArray_keys[j]);
    }
  }

  //console.log(dataArray_cln);
  return dataArray_cln;
}

function arrayHeaderRow_id_label_date(arr) {
  for (var i = 0; i < arr[0].length; i++) {
    var valueOrig = arr[0][i];
    var valueNew;
    switch (true) {
      case valueOrig === 'wd':
        valueNew = JSON.parse('{"id":"' + valueOrig + '", "label":"' + valueOrig + '", "type": "date"}');
        break;
      default:
        valueNew = JSON.parse('{"id":"' + valueOrig + '", "label": "' + valueOrig + '"}');
    }
    arr[0][i] = valueNew;
  }
  return arr;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>

<button id="myBtn">Click me!</button>

<div id='div_dashboard_A'>
  <div id='div_categoryPicker1_A'></div>
  <div id='div_table_A'></div>
</div>


<script>
  var json = [{
      "division": "GS1",
      "m1": 100.000000,
      "m2": 100.000000,
      "m3": null,
      "m4": null,
      "m5": null,
      "m6": null,
      "m7": null,
      "m8": null,
      "m9": null,
      "m10": null,
      "m11": null,
      "m12": null,
    },
    {
      "division": "GS2",
      "m1": 100.000000,
      "m2": 90.000000,
      "m3": null,
      "m4": null,
      "m5": null,
      "m6": null,
      "m7": null,
      "m8": null,
      "m9": null,
      "m10": null,
      "m11": null,
      "m12": null,
    },
    {
      "division": "PS1",
      "m1": null,
      "m2": null,
      "m3": 100.000000,
      "m4": null,
      "m5": 100.000000,
      "m6": 100.000000,
      "m7": 75.000000,
      "m8": null,
      "m9": null,
      "m10": null,
      "m11": null,
      "m12": null,
    },
    {
      "division": "PS2",
      "m1": null,
      "m2": null,
      "m3": 100.000000,
      "m4": 100.000000,
      "m5": 100.000000,
      "m6": 100.000000,
      "m7": 80.000000,
      "m8": null,
      "m9": null,
      "m10": null,
      "m11": null,
      "m12": null,
    },
    {
      "division": "PS3",
      "m1": null,
      "m2": null,
      "m3": 100.000000,
      "m4": 100.000000,
      "m5": 100.000000,
      "m6": 100.000000,
      "m7": 80.000000,
      "m8": null,
      "m9": null,
      "m10": null,
      "m11": null,
      "m12": null,
    }, {
      "division": "PS4",
      "m1": null,
      "m2": null,
      "m3": 100.000000,
      "m4": 100.000000,
      "m5": 100.000000,
      "m6": 100.000000,
      "m7": 80.000000,
      "m8": null,
      "m9": null,
      "m10": null,
      "m11": null,
      "m12": null,
    }, {
      "division": "PS5",
      "m1": null,
      "m2": null,
      "m3": 100.000000,
      "m4": 100.000000,
      "m5": 100.000000,
      "m6": 100.000000,
      "m7": 80.000000,
      "m8": null,
      "m9": null,
      "m10": null,
      "m11": null,
      "m12": null,
    }
  ];
</script>

最佳答案

不要直接修改字符串过滤器的元素。
相反，请使用控件包装器上的 state 属性。

您可以在创建控件时设置初始值。 

var categoryPicker1 = new google.visualization.ControlWrapper({
  controlType: 'StringFilter',
  containerId: 'div_categoryPicker1_A',
  matchType: 'any',
  options: {
    filterColumnIndex: 0,
    ui: {
      labelStacking: 'vertical'
    }
  },
  // set initial value
  state: {
    value: 'GS'
  }
});

或者在事件上，使用 setState 方法。
使用setState方法后，必须重新绘制控件才能生效。 

categoryPicker1.setState({
  value: 'GS'
});
categoryPicker1.draw();

请参阅以下工作片段...

google.charts.load('current', {
  packages:['controls']
}).then(function () {
  document.getElementById("myBtn").addEventListener("click", setStringFilter);

  var json = [{
      "division": "GS1",
      "m1": 100.000000,
      "m2": 100.000000,
      "m3": null,
      "m4": null,
      "m5": null,
      "m6": null,
      "m7": null,
      "m8": null,
      "m9": null,
      "m10": null,
      "m11": null,
      "m12": null,
    },
    {
      "division": "GS2",
      "m1": 100.000000,
      "m2": 90.000000,
      "m3": null,
      "m4": null,
      "m5": null,
      "m6": null,
      "m7": null,
      "m8": null,
      "m9": null,
      "m10": null,
      "m11": null,
      "m12": null,
    },
    {
      "division": "PS1",
      "m1": null,
      "m2": null,
      "m3": 100.000000,
      "m4": null,
      "m5": 100.000000,
      "m6": 100.000000,
      "m7": 75.000000,
      "m8": null,
      "m9": null,
      "m10": null,
      "m11": null,
      "m12": null,
    },
    {
      "division": "PS2",
      "m1": null,
      "m2": null,
      "m3": 100.000000,
      "m4": 100.000000,
      "m5": 100.000000,
      "m6": 100.000000,
      "m7": 80.000000,
      "m8": null,
      "m9": null,
      "m10": null,
      "m11": null,
      "m12": null,
    },
    {
      "division": "PS3",
      "m1": null,
      "m2": null,
      "m3": 100.000000,
      "m4": 100.000000,
      "m5": 100.000000,
      "m6": 100.000000,
      "m7": 80.000000,
      "m8": null,
      "m9": null,
      "m10": null,
      "m11": null,
      "m12": null,
    }, {
      "division": "PS4",
      "m1": null,
      "m2": null,
      "m3": 100.000000,
      "m4": 100.000000,
      "m5": 100.000000,
      "m6": 100.000000,
      "m7": 80.000000,
      "m8": null,
      "m9": null,
      "m10": null,
      "m11": null,
      "m12": null,
    }, {
      "division": "PS5",
      "m1": null,
      "m2": null,
      "m3": 100.000000,
      "m4": 100.000000,
      "m5": 100.000000,
      "m6": 100.000000,
      "m7": 80.000000,
      "m8": null,
      "m9": null,
      "m10": null,
      "m11": null,
      "m12": null,
    }
  ];


  var jsonArray = jsonDataArray_1to1(json);

  //Modify header row to include id and label
  jsonArray = arrayHeaderRow_id_label_date(jsonArray);
  //console.log('jsonArray');
  //console.log(jsonArray);

  var data = google.visualization.arrayToDataTable(jsonArray, false); // 'false' means that the first row contains labels, not data.
  //console.log('data');
  //console.log(data);

  var dashboard = new google.visualization.Dashboard(document.getElementById('div_dashboard_A'));

  var categoryPicker1 = new google.visualization.ControlWrapper({
    controlType: 'StringFilter',
    containerId: 'div_categoryPicker1_A',
    matchType: 'any',
    options: {
      filterColumnIndex: 0,
      ui: {
        labelStacking: 'vertical'
      }
    }
  });

  var table = new google.visualization.ChartWrapper({
    chartType: 'Table',
    containerId: 'div_table_A',
    options: {
      allowHtml: true,
      page: 'enable',
      pageSize: '3'
    }
  });

  dashboard.bind([categoryPicker1], [table]);
  dashboard.draw(data);

  //Responsive chart size when browser window size changes
  window.addEventListener('resize', function() {
    dashboard.draw(data);
  }, false);


  function setStringFilter() {
    console.log('setStringFilter executed');
    categoryPicker1.setState({
      value: 'GS'
    });
    categoryPicker1.draw();
  }

  function jsonDataArray_1to1(json) {
    //DYNAMIC JSON ARRAY

    var dataArray_cln = [];

    //A. The desired table requires the fixed columns of ..... to ..... these are directly taken from the JSON.
    var dataArray_keys = Object.keys(json[0]);

    dataArray_cln.push(dataArray_keys);

    //Add rows 1 to json.length with null values
    var dataArray_rows = json.length;
    var dataArray_cols = dataArray_keys.length;

    for (i = 0; i < dataArray_rows; i++) {
      dataArray_cln.push(Array(dataArray_cols).fill(null));
    }

    //Update array from json data
    for (i = 0; i < dataArray_rows; i++) {
      //[i + 1] because row 0 is the header, push begins with row 1
      //dataArray_cln[row][col]

      //Content in row "i" is positioned into dataArray_cln[row][col] incrementing "j" to pull each key name from dataArray_keys
      for (var j = 0; j < dataArray_keys.length; j++) {
        eval('dataArray_cln[i + 1][' + j + '] = json[i].' + dataArray_keys[j]);
      }
    }

    //console.log(dataArray_cln);
    return dataArray_cln;
  }

  function arrayHeaderRow_id_label_date(arr) {
    for (var i = 0; i < arr[0].length; i++) {
      var valueOrig = arr[0][i];
      var valueNew;
      switch (true) {
        case valueOrig === 'wd':
          valueNew = JSON.parse('{"id":"' + valueOrig + '", "label":"' + valueOrig + '", "type": "date"}');
          break;
        default:
          valueNew = JSON.parse('{"id":"' + valueOrig + '", "label": "' + valueOrig + '"}');
      }
      arr[0][i] = valueNew;
    }
    return arr;
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<button id="myBtn">Click me!</button>
<div id='div_dashboard_A'>
  <div id='div_categoryPicker1_A'></div>
  <div id='div_table_A'></div>
</div>

<小时/>

注意:Google 图表 load 语句默认会等待页面加载。
因此，您可以使用 load 语句代替 --> $(document).ready

参见上面的代码片段...

关于javascript - 使用 JavaScript 触发 Google 可视化 StringFilter，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57254413/

上一篇：javascript - 我的 onClick() 出现问题。更新数组中错误索引的数据？

下一篇：javascript - 使用 javascript 从另一个页面加载 javascript

相关文章：

javascript - 编译失败: Module not found: Can't resolve '../../common/form' in 'src' components time'

jquery - 禁用单击 div 但不悬停？

jquery - Fancybox 在服务器和本地主机上显示不同的效果(有滚动条和没有滚动条)

jquery - 使 div float 但在空间不足时保持居中

javascript - 更改谷歌图表中某些条形的颜色

google-visualization - 谷歌图表离散轴显示线？

javascript - Web SQL 无法从本地文件系统运行，如何在没有任何服务器的情况下运行？

javascript - 在控制台中使用 javascript 将 id 添加到 iframe

javascript - KnockoutJS，使用可订阅。回调目标

javascript - Backbone View +谷歌可视化API

©2024 IT工具网  联系我们