1

そこで、HTML で初歩的なダッシュボードを作成し、Google の視覚化 API を使用して作成しています。多くのグラフを作成する必要があり、以下のコードはそのためにうまく機能します。1 つの問題を除いて: データ自体は一見ランダムにグラフに関連付けられています。ページをリロードするたびに、グラフに表示されるデータが切り替わります。

他の配列と一緒に dataArray を作成することでこれを解決しようとしましたが、問題は解決しませんでした.クエリ内のチャートにデータを直接属性付ける何らかの方法が必要です。ありがとう！

<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">

  // Load the Visualization API and the piechart package.
  google.charts.load('current', {packages: ['corechart']});

  // Set a callback to run when the Google Visualization API is loaded
  google.charts.setOnLoadCallback(function() {
    drawChart('chart1', 0, 'SELECT A, B, C, D, E, G OFFSET 1', 'Sheet1',
      { title: 'Chart 1'}
    )

    drawChart('chart2', 1, 'SELECT A, I OFFSET 1', 'Sheet1',
      { title: 'Chart 2' }
    )
  });

  var chartsArray = [];
  var optionsArray = [];
  var nextID = 0;

  function drawChart(tag, id, sqlCommand, sheetName='Sheet1',  options= {}, numHeaders=1) {

    chartsArray[id] = new google.visualization.LineChart(document.getElementById(tag));

    optionsArray[id] = options;

    var queryString = encodeURIComponent(sqlCommand);

    var query = new google.visualization.Query(
       'https://docs.google.com/spreadsheets/d/1L8jhM7FHOg86hZMIJB2L_032-JbGKzX4ht6r3mxvP0gA/gviz/tq?sheet=' + sheetName + '&headers=' + numHeaders.toString() + '&tq=' + queryString);
      query.send(handleDataQueryResponse);
  }

  function handleDataQueryResponse(response, id) {
    if (response.isError()) {
      alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
      return;
    }

    data = response.getDataTable();
    chartsArray[nextID].draw(data, optionsArray[nextID]);
    nextID += 1;
  }

<div id="chart1" class="chart"></div>
<div id="chart2" class="chart"></div>

更新: setTimeout() を呼び出すことで問題を解決しました (今のところ、恐ろしい解決策です)。これにより、視覚化 API への呼び出しが必要な順序で強制的に実行されます。

4

1 に答える 1

1

コールバック関数handleDataQueryResponseは非同期で呼び出されるため、一方が他方より先に終了することを保証することはできません...

このようなものをお勧めします... 

function drawChart(tag, id, sqlCommand, sheetName='Sheet1',  options= {}, numHeaders=1) {

  chartsArray[id] = new google.visualization.LineChart(document.getElementById(tag));

  optionsArray[id] = options;

  var queryString = encodeURIComponent(sqlCommand);

  var query = new google.visualization.Query(
     'https://docs.google.com/spreadsheets/d/1L8jhM7FHOg86hZMIJB2L_032-JbGKzX4ht6r3mxvP0gA/gviz/tq?sheet=' + sheetName + '&headers=' + numHeaders.toString() + '&tq=' + queryString);
  query.send(function (response) {
    if (response.isError()) {
      alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
      return;
    }

    data = response.getDataTable();
    chartsArray[id].draw(data, optionsArray[id]);
  });
}
于 2016-07-02T00:55:39.770 に答える