为什么所选值的图表不会自动加载?

时间:2019-06-24 11:12:44

标签: javascript

我需要有关HTML或JS代码的帮助。 我想创建一个下拉框,以便用户可以选择她/他想要绘制的系列。我的问题是,图表不会针对所选值自动加载。但是,当我选择另一个值时,将加载图表。只有这样,我才能选择默认的选定值来加载其相应的图表。 谢谢您的帮助。 这是我的HTML代码:

<body>
  <div id="dashboar_div">
    <select id="bx" onChange=drawDashboard(this)>
      <option value="1" selected>TNDX</option>
      <option value="2">EUR/TND</option>
    </select>
    </br>
    <div id="chart_div"></div>
    <div id="filter_div"></div>
  </div>
</body>


<script type="text/javascript">
  function drawDashboard(menu) {
    var queryString = encodeURIComponent('search=échap texte&country=FR');
    menu.value = document.getElementById("bx").value;
    if (menu.value == '1') {
      var query = new google.visualization.Query(
        'https://docs.google.com/spreadsheets/d/1XZ3-pipHXKJMEhsnOVRTWOMlKHcio_fzmUAE0LGQhUU/edit#gid=0' + queryString);
      query.setQuery('select A, B');
      query.send(handleSampleDataQueryResponse);
    } else if (menu.value == '2') {
      var query = new google.visualization.Query(
        'https://docs.google.com/spreadsheets/d/1XZ3-pipHXKJMEhsnOVRTWOMlKHcio_fzmUAE0LGQhUU/edit#gid=0' + queryString);
      query.setQuery('select A, C');
      query.send(handleSampleDataQueryResponse);
    }
  }

  function handleSampleDataQueryResponse(response) {
    if (response.isError()) {
      alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
      return;
    }
    var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
    var data = response.getDataTable();
    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    dashboard.draw(data);
  }
</script>

1 个答案:

答案 0 :(得分:0)

您需要有一个“请选择”或在页面加载时触发

window.addEventListener("load",function() {
  drawDashboard(document.getElementById("bx"));
})

使用a请选择:

var queryString = encodeURIComponent('search=échap texte&country=FR');

function drawDashboard(menu) {
  var menuValue = menu.value;
  if (menuValue === "") return; // no selection

  var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1XZ3-pipHXKJMEhsnOVRTWOMlKHcio_fzmUAE0LGQhUU/edit#gid=0' + queryString);

  if (menuValue == '1') {
    query.setQuery('select A, B');
  } else if (menuValue == '2') {
    query.setQuery('select A, C');
  }
  query.send(handleSampleDataQueryResponse);
}

function handleSampleDataQueryResponse(response) {
  if (response.isError()) {
    alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
    return;
  }
  var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
  var data = response.getDataTable();
  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  dashboard.draw(data);
}
<div id="dashboar_div">
  <select id="bx" onChange=drawDashboard(this)>
    <option value="">Please select</option>
    <option value="1">TNDX</option>
    <option value="2">EUR/TND</option>
  </select>
  <br />
  <div id="chart_div"></div>
  <div id="filter_div"></div>
</div>

或在加载时触发选择

var queryString = encodeURIComponent('search=échap texte&country=FR');

function drawDashboard(menu) {
  var menuValue = menu.value;
  if (menuValue === "") return; // no selection

  var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1XZ3-pipHXKJMEhsnOVRTWOMlKHcio_fzmUAE0LGQhUU/edit#gid=0' + queryString);

  if (menuValue == '1') {
    query.setQuery('select A, B');
  } else if (menuValue == '2') {
    query.setQuery('select A, C');
  }
  query.send(handleSampleDataQueryResponse);
}

function handleSampleDataQueryResponse(response) {
  if (response.isError()) {
    alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
    return;
  }
  var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
  var data = response.getDataTable();
  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  dashboard.draw(data);
}
window.addEventListener("load",function() {
  drawDashboard(document.getElementById("bx"));
})
<div id="dashboar_div">
  <select id="bx" onChange=drawDashboard(this)>
    <option value="1" selected>TNDX</option>
    <option value="2">EUR/TND</option>
  </select>
  <br />
  <div id="chart_div"></div>
  <div id="filter_div"></div>
</div>