Question

我试图使用谷歌电子表格中的数据来绘制饼图（这是有效的）。当用户点击切片时，它应该显示不同div中的值。这不起作用，因为我只能查看行A和D，因为这些是用于创建饼图的行。现在我想要实现的是：

仅使用1个查询并使用行A和D绘制饼图，并使用相同的数据表填充变量。你能帮助我吗？ :)

  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawGID);
  function drawGID() {
  var populationPieQuery = encodeURIComponent('SELECT A, D LIMIT 10');
  /*var serverQuery = encodeURIComponent('SELECT A, C, E, G, H, I, J, K, L, M, N, O LIMIT 20');*/

  var queryPopulation = new google.visualization.Query(
      'https://docs.google.com/spreadsheets/d/11zIoeZsSi8jPD993uzYYNyY1PaVd4rxIkP4IJ0mUH7U/gviz/tq?sheet=Sheet1&headers=1&tq=' + populationPieQuery);
  /*var queryServer = new google.visualization.Query(
      'https://docs.google.com/spreadsheets/d/11zIoeZsSi8jPD993uzYYNyY1PaVd4rxIkP4IJ0mUH7U/gviz/tq?sheet=Sheet1&headers=1&tq=' + serverQuery);*/
  queryPopulation.send(populationPieQueryResponse);
  /*queryServer.send(serverQueryResponse);*/
}

function populationPieQueryResponse(populationResponse) {
  if (populationResponse.isError()) {
    alert('Error in query: ' + populationResponse.getMessage() + ' ' + populationResponse.getDetailedMessage());
    return;
  }

  // Listen for the 'select' event, and call my function selectHandler() when
  // the user selects something on the chart.


  var options = {
    width: 700, height: 500,
    legend: { position: 'right', alignment: 'center' },
    chartArea: {width: '70%', height: '70%'},
    backgroundColor: 'transparent',
    pieStartAngle: 180,
  };

  var populationData = populationResponse.getDataTable().getValue();
  /*var serverData = serverResponse.getDataTable();*/
  var chart = new google.visualization.PieChart(document.getElementById('population_chart'));
  google.visualization.events.addListener(chart, 'select', selectHandler);
  chart.draw(populationData, options);
     // The select handler. Call the chart's getSelection() method
  function selectHandler() {
    var selectedItem = chart.getSelection()[0];
    if (selectedItem) {
        console.log(serverData.getNumberOfColumns());
        var server = serverData.getValue(selectedItem.row, 0);
        var ranking = serverData.getValue(selectedItem.row, 1);
        var population = serverData.getValue(selectedItem.row, 2);
        var scripting = serverData.getValue(selectedItem.row, 3);
        var latency_eu = serverData.getValue(selectedItem.row, 4);
        var latency_us = serverData.getValue(selectedItem.row, 5);
        var staff = serverData.getValue(selectedItem.row, 6);
        var community = serverData.getValue(selectedItem.row, 7);
        var type = serverData.getValue(selectedItem.row, 8);
        var rates = serverData.getValue(selectedItem.row, 9);
        var style = serverData.getValue(selectedItem.row, 10);
        var language = serverData.getValue(selectedItem.row, 11);

        document.getElementById("server").innerHTML=server; 
        document.getElementById("ranking").innerHTML=ranking; 
        document.getElementById("population").innerHTML=population; 
        document.getElementById("scripting").innerHTML=scripting; 
        document.getElementById("latency_eu").innerHTML=latency_eu; 
        document.getElementById("latency_us").innerHTML=latency_us; 
        document.getElementById("staff").innerHTML=staff; 
        document.getElementById("community").innerHTML=community; 
        document.getElementById("type").innerHTML=type; 
        document.getElementById("rates").innerHTML=rates; 
        document.getElementById("style").innerHTML=style; 
        document.getElementById("language").innerHTML=language; 
    }

  }
}

更新

  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawGID);

    function drawGID() {
          var queryString = encodeURIComponent('SELECT A, D, B, E, F, G, H, I, J, K, L, M, N, O');
          var query = new google.visualization.Query(
              'https://docs.google.com/spreadsheets/d/11zIoeZsSi8jPD993uzYYNyY1PaVd4rxIkP4IJ0mUH7U/gviz/tq?sheet=Sheet1&headers=1&tq=' + queryString);
          query.send(handleQueryResponse);
        }

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

          var options = {
            width: 700, height: 500,
            legend: { position: 'right', alignment: 'center' },
            chartArea: {width: '70%', height: '70%'},
            backgroundColor: 'transparent',
            pieStartAngle: 180,
          };

          var data = response.getDataTable().getValue();
        var populationView = new google.visualization.DataView(data);
        populationView.setColumns([0,1]);


        var chart = new google.visualization.PieChart(document.getElementById('population_chart'));
        google.visualization.events.addListener(chart, 'select', selectHandler);

             // The select handler. Call the chart's getSelection() method
          function selectHandler() {
            var selectedItem = chart.getSelection()[0];
            if (selectedItem) {
                var server = data.getValue(selectedItem.row, 0);
                var ranking = data.getValue(selectedItem.row, 1);
                var population = data.getValue(selectedItem.row, 1);
                /*var scripting = data.getValue(selectedItem.row, 4);
                var latency_eu = data.getValue(selectedItem.row, 5);
                var latency_us = data.getValue(selectedItem.row, 6);
                var staff = data.getValue(selectedItem.row, 7);
                var community = data.getValue(selectedItem.row, 8);
                var type = data.getValue(selectedItem.row, 9);
                var rates = data.getValue(selectedItem.row, 10);
                var style = data.getValue(selectedItem.row, 11);
                var language = data.getValue(selectedItem.row, 12);*/

                document.getElementById("server").innerHTML=server; 
                document.getElementById("ranking").innerHTML=ranking; 
                document.getElementById("population").innerHTML=population; 
                /*document.getElementById("scripting").innerHTML=scripting; 
                document.getElementById("latency_eu").innerHTML=latency_eu; 
                document.getElementById("latency_us").innerHTML=latency_us; 
                document.getElementById("staff").innerHTML=staff; 
                document.getElementById("community").innerHTML=community; 
                document.getElementById("type").innerHTML=type; 
                document.getElementById("rates").innerHTML=rates; 
                document.getElementById("style").innerHTML=style; 
                document.getElementById("language").innerHTML=language; */
            }

          }
           chart.draw(populationView, options);
        }

Answer 1

使用DataView绘制PieChart

这将允许您返回所需的所有数据，并且仍然只将两列传递给PieChart

假设列A和D位于'SELECT A, D, ...'

中

var populationData = populationResponse.getDataTable();

var populationView = new google.visualization.DataView(populationData);
populationView.setColumns([0,1]);


var chart = new google.visualization.PieChart(document.getElementById('population_chart'));
google.visualization.events.addListener(chart, 'select', selectHandler);
chart.draw(populationView, options);

Google Charts - 查询所有行，但只绘制其中的2行。怎么样？

1 个答案: