Javascript 谷歌图表可变范围问题_Javascript_Api_Google Visualization

Javascript 谷歌图表可变范围问题

javascript api google-visualization

Javascript 谷歌图表可变范围问题,javascript,api,google-visualization,Javascript,Api,Google Visualization,试图制作一个谷歌图表仪表板，但我在一些简单的代码上遇到了一些麻烦，这让我抓狂。我认为这与可变范围有关以下是我在谷歌教程中制作简单图表的代码： <!DOCTYPE html> <html> <head> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type = 'text/javascript

试图制作一个谷歌图表仪表板，但我在一些简单的代码上遇到了一些麻烦，这让我抓狂。我认为这与可变范围有关

以下是我在谷歌教程中制作简单图表的代码：

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type = 'text/javascript'>
        var options = {
      width: 400,
      height: 240,
      vAxis: {minValue:0, maxValue:1000},
      animation: {
        duration: 1000,
        easing: 'out'
      }
    };

       var chart = new google.visualization.ColumnChart(
           document.getElementById('chart_div'));
        var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz';
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'x');
        data.addColumn('number', 'A');
        data.addColumn('number', 'B');
        data.addRow(['A', 123, 40]);
        data.addRow(['B', 17, 20]);
        var addButton = document.getElementById('unique');
        function drawChart() {
          // Disabling the buttons while the chart is drawing.
          addButton.disabled = true;
          google.visualization.events.addListener(chart, 'ready',
              function() {
                // Enabling only relevant buttons.
                addButton.disabled = (data.getNumberOfColumns() - 1) >= chars.length;
              });
          chart.draw(data, options);
        }
        function shuffleAndDrawChart() {
          for (var i = 0; i < data.getNumberOfRows(); ++i) {
            for (var j = 1; j < data.getNumberOfColumns(); ++j) {
              var num = Math.floor(Math.random() * 1000);
              data.setValue(i, j, num);
            }
          }
          drawChart();
        }
        addButton.onclick = function() {
          data.addColumn('number', chars[data.getNumberOfColumns() - 1]);
          shuffleAndDrawChart();
        }
        drawChart();     
    </script>

    <title>Light Blue - Admin Template</title>
    <link href="css/application.css" rel="stylesheet">
    <link rel="shortcut icon" href="img/favicon.png">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <?php
        require_once 'includes/ga/src/Google_Client.php';
        require_once 'includes/ga/src/contrib/Google_AnalyticsService.php';
        require_once 'includes/ga/src/contrib/Google_PlusService.php';
        require_once 'includes/gaConnect.php';
        require_once 'includes/functions.php';

        if (!$client->getAccessToken()) 
            {
            $authUrl = $client->createAuthUrl();
            exit("<a class='login' href='$authUrl'>Connect Me!</a>");
            }
        else 
            {
            $analytics = new Google_AnalyticsService($client);

            $lastmonth = date('Y') . "-" . (date('m')-1) . "-" . date('d');
            $yesterday = date('Y') . "-" . date('m') . "-" . (date('d')-1);

            $visitsOverTime = runQuery($analytics, 'ga:visits', $lastmonth, $yesterday, 'ga:date');
            $totalVisits = runQuery($analytics, 'ga:visits', $lastmonth, $yesterday, NULL);

            $uniqueOverTime = runQuery($analytics, 'ga:visitors', $lastmonth, $yesterday, 'ga:date');
            $totalUnique = runQuery($analytics, 'ga:visitors', $lastmonth, $yesterday, NULL);

            $pageviewsOverTime = runQuery($analytics, 'ga:pageviews', $lastmonth, $yesterday, 'ga:date');
            $totalPageviews = runQuery($analytics, 'ga:pageviews', $lastmonth, $yesterday, NULL);

            $bounceRateOverTime = runQuery($analytics, 'ga:visitBounceRate', $lastmonth, $yesterday, 'ga:date');
            $totalBounceRate = runQuery($analytics, 'ga:visitBounceRate', $lastmonth, $yesterday, NULL);

            $newVisitsOverTime = runQuery($analytics, 'ga:percentNewVisits', $lastmonth, $yesterday, 'ga:date');
            $totalNewVisits = runQuery($analytics, 'ga:percentNewVisits', $lastmonth, $yesterday, NULL);

            $avgTimeOverTime = runQuery($analytics, 'ga:avgTimeOnSite', $lastmonth, $yesterday, 'ga:date');
            $totalAvgTime = runQuery($analytics, 'ga:avgTimeOnSite', $lastmonth, $yesterday, NULL);
            }
    ?>
    <meta charset="utf-8">
</head>


变量选项={
宽度：400，
身高：240，
变量：{minValue:0，maxValue:1000}，
动画：{
持续时间：1000，
放松：“退出”
}
};
var chart=新的google.visualization.ColumnChart(
document.getElementById（'chart_div'）；
var chars='ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz'；
var data=new google.visualization.DataTable（）；
data.addColumn（'string'，'x'）；
data.addColumn（'number'，'A'）；
data.addColumn（'number'，'B'）；
addRow（[A'，123，40]）；
addRow（['B'，17,20]）；
var addButton=document.getElementById（'unique'）；
函数绘图图（）{
//在绘制图表时禁用按钮。
addButton.disabled=true；
google.visualization.events.addListener（图表'ready'，
函数（）{
//仅启用相关按钮。
addButton.disabled=（data.getNumberOfColumns（）-1）>=chars.length；
});
图表绘制（数据、选项）；
}
函数ShuffleAndRawChart（）{
对于（var i=0；i


问题是这段代码（直接从谷歌开发网站复制/粘贴）不起作用！！我不知道为什么！！！！
这段代码对我唯一有效的时候是我将所有变量声明放在drawChart（）函数中。否则，我会得到一张空白的画布，没有图表
这太令人沮丧了，从周四起我就一直在努力解决这个问题。它正在慢慢地从里到外折磨着我，我想如果我不尽快弄明白的话，我可能会做一些激烈的事情
请帮忙！我陷入了一种越来越深的抑郁和酗酒状态，因为每天我都不明白这个问题
--编辑--
我被告知检查控制台是否有任何JavaScript或HTML错误。我运行了FireBug JavaScript控制台，没有发现任何错误。如果有更好的方法，请告诉我。我对JavaScript还是相当陌生。
首先，您缺少google loader，因此可视化API永远不会加载。其次，按照代码的设置方式，在加载API之前尝试创建可视化元素时会遇到问题。您需要将所有图表代码包装在另一个函数中，并将该函数用作来自google loader的回调。它看起来像这样：
function initialize () {
    var options = {
        width: 400,
        height: 240,
        vAxis: {minValue:0, maxValue:1000},
        animation: {
            duration: 1000,
            easing: 'out'
        }
    };

    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
    var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz';
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'x');
    data.addColumn('number', 'A');
    data.addColumn('number', 'B');
    data.addRow(['A', 123, 40]);
    data.addRow(['B', 17, 20]);
    var addButton = document.getElementById('unique');
    function drawChart() {
        // Disabling the buttons while the chart is drawing.
        addButton.disabled = true;
        google.visualization.events.addListener(chart, 'ready', function() {
            // Enabling only relevant buttons.
            addButton.disabled = (data.getNumberOfColumns() - 1) >= chars.length;
        });
        chart.draw(data, options);
    }
    function shuffleAndDrawChart() {
        for (var i = 0; i < data.getNumberOfRows(); ++i) {
            for (var j = 1; j < data.getNumberOfColumns(); ++j) {
                var num = Math.floor(Math.random() * 1000);
                data.setValue(i, j, num);
            }
        }
        drawChart();
    }
    addButton.onclick = function() {
        data.addColumn('number', chars[data.getNumberOfColumns() - 1]);
        shuffleAndDrawChart();
    }
    drawChart();
}
google.load('visualization', '1', {packages:['corechart'], callback: initialize});

函数初始化（）{
变量选项={
宽度：400，
身高：240，
变量：{minValue:0，maxValue:1000}，
动画：{
持续时间：1000，
放松：“退出”
}
};
var chart=new google.visualization.ColumnChart（document.getElementById（'chart_div'））；
var chars='ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz'；
var data=new google.visualization.DataTable（）；
data.addColumn（'string'，'x'）；
data.addColumn（'number'，'A'）；
data.addColumn（'number'，'B'）；
addRow（[A'，123，40]）；
addRow（['B'，17,20]）；
var addButton=document.getElementById（'unique'）；
函数绘图图（）{
//在绘制图表时禁用按钮。
addButton.disabled=true；
google.visualization.events.addListener（图表'ready'，函数（）{
//仅启用相关按钮。
addButton.disabled=（data.getNumberOfColumns（）-1）>=chars.length；
});
图表绘制（数据、选项）；
}
函数ShuffleAndRawChart（）{
对于（var i=0；i
不错！！这太有道理了，我简直不敢相信我想不出来。非常感谢你！