使用Chartrangeslider进行Google可视化，并从Google文档电子表格导入数据

问题描述 投票：1回答：1

我有问题，当使用带有chartwrapper和controlwrapper的仪表板环境时，我没有设法从谷歌电子表格中实现我的数据。我使用了谷歌图表网站（https://developers.google.com/chart/interactive/docs/gallery/controls）中的饼图示例，并试图修改但没有成功。也许有人可以提供指针！在此先感谢（链接到jsfiddle：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>
charts google-visualization visualization
1个回答
0
投票

首先，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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.