Google Charts: Uncaught ReferenceError: data is not defined and mixed Content答案

【问题标题】：Google Charts: Uncaught ReferenceError: data is not defined and mixed ContentGoogle Charts: Uncaught ReferenceError: data is not defined and mixed Content
【发布时间】：2016-02-06 00:20:23
【问题描述】：

我试图从数据数组中绘制图表但失败了。我什么都试过了。请指教。有代码。我收到两条消息错误：未捕获的 ReferenceError：未定义数据和混合内容：“https://n-ynglt762zsbkrcsxo6kvcrifknrgdiycdteawcy-script.googleusercontent.com/userCodeAppPanel”处的页面已通过 HTTPS 加载，但请求了不安全的脚本“http://www.google.com/jsapi”。此请求已被阻止；内容必须通过 HTTPS 提供。

 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  <title>
  Google Visualization API Sample
</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load('visualization', '1.1', {packages: ['corechart', 'controls']});
</script>
<script type="text/javascript">


google.load("visualization", "1", {packages:["controls"]});
  google.setOnLoadCallback(drawVisualization);


            function drawVisualization() {
                var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));

     var control = new google.visualization.ControlWrapper({
        'controlType': 'ChartRangeFilter',
        'containerId': 'control',
        'options': {
            // Filter by the date axis.
            'filterColumnIndex': 0,
            'ui': {
                'chartType': 'LineChart',
                'chartOptions': {
                    'chartArea': {'width': '90%'},
                    'hAxis': {'baselineColor': 'none'}
                },
                'chartView': {
                    'columns': [0, 1, 2]
                },
                'minRangeSize': 1
            }
        },
        // Initial range: 1 to 4.
        'state': {'range': {'start': 1, 'end': 4}},
        view: {
            columns: [{
                type: 'number',
                calc: function (dt, row) {
                    return {v: row, f: dt.getFormattedValue(row, 0)};
                }
            }, 1, 2]
        }
    });

    //then reverse the process in the ChartWrapper's view.columns:

    var chart = new google.visualization.ChartWrapper({
        'chartType': 'AreaChart',
        'containerId': 'chart',
        'options': {
            // Use the same chart area width as the control for axis alignment.
            'chartArea': {'height': '80%', 'width': '90%'},
            'hAxis': {'slantedText': false},
            'vAxis': {'viewWindow': {'min': 0, 'max': 20}},
            'legend': {'position': 'none'}
        },
        view: {
            columns: [{
                type: 'string',
                label: data.getColumnLabel(0),
                calc: function (dt, row) {
                    return dt.getFormattedValue(row, 0);
                }
            }, 1, 2]
        }
    });

  var dataTable = new google.visualization.DataTable();

    var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1SphK7Dqcok03TEGaxL-sO7JkovXoYOO3rDbtKGEjjEU/edit#gid=0');

      var nowone = getNowDate();
      query.setQuery("select A,B,C where A >= datetime '"+nowone+"' ");
      query.send(handleQueryResponse);

                dashboard.bind(control, chart);
                dashboard.draw(data);

function getNowDate(){
var d=new Date();
d.setDate(d.getDate() - 1);

var year = d.getFullYear();  
var month = d.getMonth() + 1;
var day = d.getDate();
var hour = d.getHours();
var minute = d.getMinutes();
var second = d.getSeconds();
var microsecond = d.getDate();

if (month.toString().length == 1) {
    month = '0' + month;
}

if (day.toString().length == 1) {
    day = '0' + day;
}

if (hour.toString().length == 1) {
    hour = '0' + hour;
}

if (minute.toString().length == 1) {
    minute = '0' + minute;
}

if (second.toString().length == 1) {
    second = '0' + second;
}

//while(microsecond.toString().length < 3) {
//    microsecond = '0' + microsecond;
//}

var dateString = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
return dateString;
} 

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

    var data = response.getDataTable();

 }
 }


        </script>
    </head>

    <body style="font-family: Arial;border: 0 none;">
        <div id="dashboard" style="width:1300px;overflow:scroll;">
            <div id="chart" style="position: relative; width: 1300px; height: 300px;"></div>
            <div id="control"></div>
        </div>
        <div id="junk_div" style="display: none;"></div>
    </body>

</html>

感谢您对这个问题的关注。我仍然不明白“数据”是在 drawVisualization 中定义的。 .我有两个类似的代码工作我想分享...

code1 working code2 working

【问题讨论】：

标签： google-apps-script google-visualization

【解决方案1】：

Google Apps 要求使用 ssl 加载外部内容。因此，将所有链接更改为“https”而不是“http”。

注册。 “数据”未定义：当谷歌可视化加载时，它使用google.setOnLoadCallback() 调用 drawVisualization。在 drawVisualization 中，您使用的是“数据”。但是，它还没有定义，因为您只是在稍后调用 handleQueryResponse 时才定义它。所以请确保在 drawVisualization 中定义了“数据”。

【讨论】：

那些文档需要适当的权限。将它们公开，以便我们查看它们。
正确。在这种情况下它会起作用，因为 (eg1) 'data' 是在 drawChart() 中定义的，它在 google 可视化加载后立即执行。所以那里没有什么是未定义的。
eg1 很清楚.. 但是当数据没有定义时，eg2 对我来说有点难以组合。我不是真正的专业知识...请您给我一个可见的替代方案...我无法找到解决方案...

【解决方案2】：

给你一个完整的工作解决方案：

<!DOCTYPE html>

<html xmlns="https://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  <title>
    Google Visualization API Sample
  </title>
  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <script type="text/javascript">
    google.load('visualization', '1.1', {packages: ['corechart', 'controls']});
  </script>

 </head>

<body style="font-family: Arial;border: 0 none;">
        <div id="dashboard" style="width:1300px;overflow:scroll;">
            <div id="chart" style="position: relative; width: 1300px; height: 300px;"></div>
            <div id="control"></div>
        </div>

        <div id="junk_div" style="display: none;"></div>


<script type="text/javascript">

var data;
var dataTable;
var dashboard;

google.load("visualization", "1", {packages:["controls"]});
google.setOnLoadCallback(drawVisualization);

function setupData(){
  var control = new google.visualization.ControlWrapper({
        'controlType': 'ChartRangeFilter',
        'containerId': 'control',
        'options': {
            // Filter by the date axis.
            'filterColumnIndex': 0,
            'ui': {
                'chartType': 'LineChart',
                'chartOptions': {
                    'chartArea': {'width': '90%'},
                    'hAxis': {'baselineColor': 'none'}
                },
                'chartView': {
                    'columns': [0, 1, 2]
                },
                'minRangeSize': 1
            }
        },
        // Initial range: 1 to 4.
        'state': {'range': {'start': 1, 'end': 4}},
        view: {
            columns: [{
                type: 'number',
                calc: function (dt, row) {
                    return {v: row, f: dt.getFormattedValue(row, 0)};
                }
            }, 1, 2]
        }
    });

    //then reverse the process in the ChartWrapper's view.columns:

    var chart = new google.visualization.ChartWrapper({
        'chartType': 'AreaChart',
        'containerId': 'chart',
        'options': {
            // Use the same chart area width as the control for axis alignment.
            'chartArea': {'height': '80%', 'width': '90%'},
            'hAxis': {'slantedText': false},
            'vAxis': {'viewWindow': {'min': 0, 'max': 20}},
            'legend': {'position': 'none'}
        },
        view: {
            columns: [{
                type: 'string',
                label: data.getColumnLabel(0),
                calc: function (dt, row) {
                    return dt.getFormattedValue(row, 0);
                }
            }, 1, 2]
        }
    });
    console.log('label: ' + data.getColumnLabel(0));
    dashboard.bind(control, chart);
    dashboard.draw(data);

}

function drawVisualization() {

  dataTable = new google.visualization.DataTable();


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

  var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1SphK7Dqcok03TEGaxL-sO7JkovXoYOO3rDbtKGEjjEU/edit#gid=0');

  var nowone = getNowDate();
  query.setQuery("select A,B,C where A >= datetime '"+nowone+"' ");
  query.send(handleQueryResponse);

}

function getNowDate(){
  var d = new Date();
  d.setDate(d.getDate() - 1);

  var year = d.getFullYear();  
  var month = d.getMonth() + 1;
  var day = d.getDate();
  var hour = d.getHours();
  var minute = d.getMinutes();
  var second = d.getSeconds();
  var microsecond = d.getDate();

  if (month.toString().length == 1) {
      month = '0' + month;
  }

  if (day.toString().length == 1) {
      day = '0' + day;
  }

  if (hour.toString().length == 1) {
      hour = '0' + hour;
  }

  if (minute.toString().length == 1) {
      minute = '0' + minute;
  }

  if (second.toString().length == 1) {
      second = '0' + second;
  }

  //while(microsecond.toString().length < 3) {
  //    microsecond = '0' + microsecond;
  //}

  var dateString = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
  return dateString;
} 

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

    data = response.getDataTable();

    setupData();
}

</script>

</body>

</html>

【讨论】：

这根本不能解释你做了什么来修复它！
@LukeSalamone 在尝试解决方案之前，您应该阅读下面的讨论