代码之家 › 专栏 › 技术社区 › Christoph Seiffert

使用ChartRangeSloider实现Google可视化,并从Google docs电子表格导入数据

visualization google-visualization charts

Christoph Seiffert · 技术社区 · 6 年前

我有一个问题,当使用带有chartwrapper和controlwrapper的仪表板环境时,我无法实现来自google电子表格的数据。我使用了google charts网站上的piechart示例( https://developers.google.com/chart/interactive/docs/gallery/controls )并试图修改,但没有成功。也许有人可以提供一个指针!提前感谢(链接到JSFIDLE: https://jsfiddle.net/Chriseif/08mk90hu/1/#&togetherjs=MHq11Kn3hl )

<html>
  <head>
    <!--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 controls package.
      google.charts.load('current', {'packages':['corechart', 'controls']});

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

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

                var query = new 



  google.visualization.Query("https://docs.google.com/spreadsheets/d/
1uJNf8RgPjcjm3pUWig0VL4EEww1PG-bNL8mtcxI6SYI/edit");
            query.send(response);

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


        // Create a dashboard.
        var dashboard = new google.visualization.Dashboard(
            document.getElementById('dashboard_div'));

        // Create a range slider, passing some options
        var donutRangeSlider = new google.visualization.ControlWrapper({
          'controlType': 'ChartRangeFilter',
          'containerId': 'filter_div',
          'options': {
            'filterColumnIndex ': 2
          }
        });

        // Create a pie chart, passing some options
        var pieChart = new google.visualization.ChartWrapper({
          'chartType': 'LineChart',
          'containerId': 'chart_div',
          'options': {
            'width': 900,
            'height': 300,
            'pieSliceText': 'value',
            'legend': 'right'
           }
        });

         // Establish dependencies, declaring that 'filter' drives 
'pieChart',
         // so that the pie chart will only display entries that are let 
through
         // given the chosen slider range.
         dashboard.bind(donutRangeSlider, pieChart);

        // Draw the dashboard.
        dashboard.draw(data1);
      }
     </script>
  </head>

  <body>
    <!--Div that will hold the dashboard-->
    <div id="dashboard_div">
      <!--Divs that will hold each control and chart-->
      <div id="filter_div"></div>
      <div id="chart_div"></div>
    </div>
  </body>
</html>

1 回复 | 直到 6 年前

WhiteHat 6 年前

首先 query.send 方法是异步的,并接受回调函数的参数
因为您需要等待查询中的数据,
所有仪表板代码都应该在回调中
否则它将在返回数据之前运行。。。

// the argument should be the name of a function
query.send(handleQueryResponse);

// callback function to be called when data is ready
function handleQueryResponse(response) {
  //draw dashboard here...

接下来,范围过滤器应在用于x轴的列上运行
除非您使用的是视图,否则它将是列索引 0 (零是第一个索引)

var rangeSlider = new google.visualization.ControlWrapper({
  controlType: 'ChartRangeFilter',
  containerId: 'filter_div',
  options: {
    filterColumnIndex: 0  // <-- x-axis column
  }
});

此外,当从电子表格中绘制图表时,
您需要在每个轴上设置特定的数字格式,
否则,它将显示单词 general 作为数字的一部分。。。

var chart = new google.visualization.ChartWrapper({
  chartType: 'LineChart',
  containerId: 'chart_div',
  options: {
    width: 900,
    height: 300,
    pieSliceText: 'value',
    legend: 'right',

    // set number formats
    hAxis: {
      format: '#,##0'
    },
    vAxis: {
      format: '#,##0'
    }
  }
});

请参阅以下工作段。。。

google.charts.load('current', {
    packages: ['corechart', 'controls']
}).then(function () {
  var query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1uJNf8RgPjcjm3pUWig0VL4EEww1PG-bNL8mtcxI6SYI/edit");
  query.send(handleQueryResponse);

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

    var dashboard = new google.visualization.Dashboard(
      document.getElementById('dashboard_div')
    );

    var rangeSlider = new google.visualization.ControlWrapper({
      controlType: 'ChartRangeFilter',
      containerId: 'filter_div',
      options: {
        filterColumnIndex: 0
      }
    });

    var chart = new google.visualization.ChartWrapper({
      chartType: 'LineChart',
      containerId: 'chart_div',
      options: {
        width: 900,
        height: 300,
        pieSliceText: 'value',
        legend: 'right',
        hAxis: {
          format: '#,##0'
        },
        vAxis: {
          format: '#,##0'
        }
      }
    });

    dashboard.bind(rangeSlider, chart);
    dashboard.draw(data1);
  }
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard_div">
  <div id="filter_div"></div>
  <div id="chart_div"></div>
</div>