Question

到目前为止，我可以使用谷歌图表显示条形图。在那一刻，值是硬编码的，但我稍后将从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个条形测试。我想知道如何使用我的网络服务器上的文件填充此警报？

Answer 1

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

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

selection变量现在是一个具有row和column属性的对象。点击栏上的吉姆失败次数将返回以下内容：

column: 0
row: 2

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

column: 2
row: 2

您的设置中定义的data变量也可在此处获取，以便您获取此人的姓名：

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

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

在点击谷歌图表栏上显示外部文本文件的内容

1 个答案: