向谷歌可视化 API 添加类别过滤器

我是谷歌图表可视化的新手。我正在使用"谷歌电子表格"作为我的图表的数据源，但是当我尝试添加过滤器类别时，我似乎无法控制和组合谷歌游戏场中的两个示例

这是我展示饼图的方式：

<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", '1', {packages:['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
  var query = new google.visualization.Query(
      'http://spreadsheets.google.com/tq?key=0ArCLNmjk_GPpdHVZbVVuUlNKUF9TTHlpaWxPY1dmUnc&range=B1:C4&pub=1');
  query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
  if (response.isError()) {
    alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
    return;
  }
  var data = response.getDataTable();
  var chart = new google.visualization.PieChart(document.getElementById('columnchart'));
  chart.draw(data, null);
}
</script>
<title>Data from a Spreadsheet</title>
</head>
<body>
<span id='columnchart'></span>
</body>
</html>

我在电子表格中的第一个范围（列 A）具有"类别"的定义，我想将其过滤器添加到我的图表中。

为此，

您需要修复一些问题：首先，查询仅限于电子表格中的两列（B1:C4，都称为"count"），其中不包括控件。其次，图表的容器应该是div，而不是跨度。第三，为了使用控件，您需要为图表使用 ChartWrapper，并且必须为 API 提供"控件"包。下面是一个有效的代码示例：

[JavaScript]

function drawChart() {
    var query = new google.visualization.Query('http://spreadsheets.google.com/tq?key=0ArCLNmjk_GPpdHVZbVVuUlNKUF9TTHlpaWxPY1dmUnc&pub=1');
    query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
    if (response.isError()) {
        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
        return;
    }
    var data = response.getDataTable();
    var control = new google.visualization.ControlWrapper({
        containerId: 'control_div',
        controlType: 'CategoryFilter',
        options: {
            filterColumnIndex: 0,
            ui: {
            }
        }
    });
    var chart = new google.visualization.ChartWrapper({
        containerId: 'chart_div',
        chartType: 'PieChart',
        options: {
            height: 400,
            width: 600
        },
        view: {
            columns: [0, 1]
        }
    });
    var dashboard = new google.visualization.Dashboard(document.querySelector('#dashboard'));
    dashboard.bind([control], [chart]);
    dashboard.draw(data);
}
google.load('visualization', '1', {packages:['controls'], callback: drawChart});

[网页]

<div id="dashboard">
    <div id="control_div"></div>
    <div id="chart_div"></div>
</div>

在这里看到它的工作：http://jsfiddle.net/asgallant/rS4L8/

相关内容

最新更新

热门标签：