0

到目前为止，我能够使用谷歌图表显示条形图。目前这些值是硬编码的，但我稍后会从 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 个条形图用于测试。我想知道如何使用网络服务器上文件中的文本填充此警报？

4

1 回答 1

0

使用selectHandler您可以获得已选择的行和列，如下所示：

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

该selection变量现在是一个同时具有 arow和 acolumn属性的对象。单击 Jim 的失败次数栏将返回以下内容：

column: 0
row: 2

同样，单击 Peter 失败的次数将返回：

column: 2
row: 2

您的设置中定义的data变量也可在此处获得，允许您获取人员的姓名：

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

或者您可以只运行一些 ajax 来获取相应文本文件的内容。

于 2012-08-01T14:41:22.440 回答