Question

我需要有关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>

Answer 1

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

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>

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

1 个答案: