Question

嘿伙计们，我发现很难理解谷歌可视化java脚本是如何工作的，因为我是新手。然而，我确实有一个破解它的文档已经并设法创建一个简单的图表显示电子表格中的数据。

然而，现在我一直在尝试在我的图表和饼图中实现添加的交互功能（如滑块），仅用于测试，看看我是否可以使用我的数据。

我的问题然而简单地说它不起作用，网页上没有显示任何内容，我确保已将JS文件正确链接到我的HTML文件。

google.load('visualization', '1.0', {'packages':['controls']});
  google.setOnLoadCallback(drawDashboard);

function drawDashboard() {
    var query = new google.visualization.Query(
      '//docs.google.com/spreadsheets/d/1FOVmfesx7ATNe8qjWjkU2GbjBCBZxL0BRswJv6rcGPs/gviz/tq?gid=1324373577&tq=select%20B,C%20where%20B%20%3C%3E%20%22%22');
  query.send(handleQueryResponse);

}

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

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

    // Create a range slider, passing some options
        var donutRangeSlider = new google.visualization.ControlWrapper({
          'controlType': 'NumberRangeFilter',
          'containerId': 'filter_div',
          'options': {
            'filterColumnLabel': 'Number Attended'
          }
        });

    // Create a pie chart, passing some options
        var pieChart = new google.visualization.ChartWrapper({
          'chartType': 'PieChart',
          'containerId': 'chart_div',
          'options': {
            'width': 300,
            '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(data);

Answer 1

在加载google.visualization.Dashboard之前，您无法使用google.load('visualization', '1.0', { 'packages': ['controls'] }); google.setOnLoadCallback(function() { $("#out").text($("#out").text() + "google.visualization is " + google.visualization + " in the callback.\n"); }); $("#out").text($("#out").text() + "google.visualization is " + google.visualization + " out here.\n");。

以下是演示的简化版本。

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<pre id="out"></pre>

＆＃13;

package com.sonar.test;

public class Test {

    public Test() {
        exp01();
    }

    public void exp01() {

        System.out.println("Test test");

    }

    public static void main(String[] args) {

        new Test();
    }

}

＆＃13;

您需要对代码进行重新分解，以便在加载之前不会尝试使用google.visualization。

使用外部数据创建仪表板（Google电子表格） - JavaScript

1 个答案: