0

これまでのところ、Google チャートを使用して棒グラフを表示できます。現時点では、値はハードコードされていますが、後で mysql テーブルから取得します。私の質問は、チャートでクリックされたバーに応じて個別のアラートを表示することは可能ですか? たとえば、ジムは失敗します。各バーを個別にクリックして、複数の外部 .txt ファイルのいずれかの内容を含むアラートを表示できるようにしたいと考えています。これまでのところ、どのバーをクリックしても同じアラートを表示できます。

<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

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

  // Set a callback to run when the Google Visualization API is loaded.
  google.setOnLoadCallback(drawChart);

  // Callback that creates and populates a data table,
  // instantiates the pie chart, passes in the data and
  // draws it.
  function drawChart() {

    // Create the data table.
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Student');
    data.addColumn('number', 'Passes');
data.addColumn('number', 'Fails');
    data.addRows([
      ['Jim', 199, 4],
      ['John', 154, 15],
      ['Peter', 246, 32]
    ]);

    // Set chart options
    var options = {'title':'Nightly Build Results',
                   'width':800,
                   'height':400};

    // Instantiate and draw our chart, passing in some options.
    var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
    chart.draw(data, options);
google.visualization.events.addListener(chart, 'select', selectHandler);

function selectHandler(e)
{
    alert('Information');
}

  }
</script>

アップデート：

function selectHandler()
{
  var selection = chart.getSelection();
      var message = '';
      for (var i = 0; i < selection.length; i++)
  {
        var item = selection[i];
        if (item.row != null && item.column != null)
        {
     if(item.row == 0 && item.column == 1)
    {
        message = 'Jims passes.';
    }
         else if (item.row == 0 && item.column == 2)
    {
        message += 'Jims fails.';
    }
        } 
  else if (item.row != null)
  {
          var str = data.getFormattedValue(item.row, 0);
          message += '{row:' + item.row + ', column:none}; value (col 0) = ' + str + '\n';
  }
  else if (item.column != null)
  {
          var str = data.getFormattedValue(0, item.column);
          message += '{row:none, column:' + item.column + '}; value (row 0) = ' + str + '\n';
      }
    }

    if (message == '') 
    {
      message = 'something not yet added';
    }

    alert('You selected ' + message);

  }

そのため、個々のバーに（クリック時に）表示したいものをうまく表示しています。これまでのところ、テスト用に少なくとも2つのバーがあります。このアラートに Web サーバー上のファイルからのテキストを入力する方法を知りたいです。

4

1 に答える 1

0

を使用すると、selectHandler次のように選択された行と列を取得できます。

function selectHandler() {
    var selection = chart.getSelection();
}

変数は、とプロパティのselection両方を持つオブジェクトになりました。ジムの失敗回数のバーをクリックすると、次のように返されます。rowcolumn

column: 0
row: 2

同様に、Peter の失敗数をクリックすると、次のように返されます。

column: 2
row: 2

セットアップで定義されたdata変数もここで使用でき、人の名前を取得できます。

var name = data.getValue(selection.row, 0);

または、適切なテキスト ファイルの内容を取得するために ajax を実行することもできます。

于 2012-08-01T14:41:22.440 に答える