Fatal编程技术网
  • google-apps-script/
  • Google apps script Google图表：未捕获引用错误：数据未定义且内容混合

Google apps script Google图表：未捕获引用错误：数据未定义且内容混合

google-apps-script google-visualization

Google apps script Google图表：未捕获引用错误：数据未定义且内容混合,google-apps-script,google-visualization,Google Apps Script,Google Visualization,我试图从数据数组中绘制图表，但失败了。我什么都试过了。请给我一些建议。这是密码。我收到两条消息错误：Uncaught ReferenceError:未定义数据且内容混合：“”处的页面是通过HTTPS加载的，但请求了一个不安全的脚本“”。此请求已被阻止；内容必须通过HTTPS提供 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content=

我试图从数据数组中绘制图表，但失败了。我什么都试过了。请给我一些建议。这是密码。我收到两条消息错误：Uncaught ReferenceError:未定义数据且内容混合：“”处的页面是通过HTTPS加载的，但请求了一个不安全的脚本“”。此请求已被阻止；内容必须通过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>


谷歌可视化API示例
load（'visualization'，'1.1'，{packages:['corechart'，'controls']}）；
load（“可视化”、“1”、{packages:[“控件”]}）；
setOnLoadCallback（drawVisualization）；
函数drawVisualization（）{
var dashboard=new google.visualization.dashboard（document.getElementById（'dashboard'）；
var control=new google.visualization.ControlWrapper({
“controlType”：“ChartRangeFilter”，
“集装箱ID”：“控制”，
“选项”：{
//按日期轴过滤。
“filterColumnIndex”：0，
“用户界面”：{
“图表类型”：“线条图”，
“图表选项”：{
'chartArea'：{'width'：'90%}，
'hAxis'：{'baselineColor'：'none'}
},
“图表视图”：{
“列”：[0,1,2]
},
“minRangeSize”：1
}
},
//初始范围：1到4。
'state'：{'range'：{'start'：1，'end'：4}，
视图：{
栏目：[{
键入：“编号”，
计算：函数（dt，行）{
返回{v:row，f:dt.getFormattedValue（row，0）}；
}
}, 1, 2]
}
});
//然后在ChartWrapper的view.columns中反转该过程：
var chart=new google.visualization.ChartWrapper({
“图表类型”：“区域图表”，
“集装箱运输”：“图表”，
“选项”：{
//使用与轴对齐控件相同的图表区域宽度。
'chartArea'：{'height'：'80%，'width'：'90%}，
'hAxis'：{'slidedtext'：false}，
'vAxis'：{'viewWindow'：{'min'：0，'max'：20}，
'legend'：{'position'：'none'}
},
视图：{
栏目：[{
键入：“字符串”，
标签：data.getColumnLabel（0），
计算：函数（dt，行）{
返回dt.getFormattedValue（行，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（）；
setQuery（“选择A、B、C，其中A>=datetime'+NoOne+”）；
发送（handleQueryResponse）；
仪表板绑定（控件、图表）；
仪表盘.绘图（数据）；
函数getNowDate（）{
var d=新日期（）；
d、 setDate（d.getDate（）-1）；
var year=d.getFullYear（）；
变量月份=d.getMonth（）+1；
var day=d.getDate（）；
var hour=d.getHours（）；
var minute=d.getMinutes（）；
var second=d.getSeconds（）；
var微秒=d.getDate（）；
if（month.toString（）.length==1）{
月份='0'+月份；
}
if（day.toString（）.length==1）{
天='0'+天；
}
if（hour.toString（）.length==1）{
小时='0'+小时；
}
if（minute.toString（）.length==1）{
分钟='0'+分钟；
}
if（second.toString（）.length==1）{
秒='0'+秒；
}
//while（微秒.toString（）.长度<3）{
//微秒='0'+微秒；
//}
var dateString=year+'-'+month+'-'+day+'+hour+'：'+minute+'：'+second；
返回日期字符串；
} 
函数handleQueryResponse（响应）{
if（response.isError（））{
警报（'查询中的错误：'+response.getMessage（）+'+response.getDetailedMessage（））；
返回；
}
var data=response.getDataTable（）；
}
}
我感谢你对这个问题的关注。我还是不明白“数据”是在drawVisualization中定义的。我有两个类似的代码工作，我想分享

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

雷格。”未定义数据：当google visualization加载时，它使用
google.setOnLoadCallback（）
调用drawVisualization。在drawVisualization中，您使用的是“数据”。但是，它还没有定义，因为您只是在稍后调用handleQueryResponse时才定义它。因此，请确保在drawVisualization中定义了“数据”。

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

雷格。”未定义数据：当google visualization加载时，它使用
google.setOnLoadCallback（）
调用drawVisualization。在drawVisualization中，您使用的是“数据”。但是，它还没有定义，因为您只是在稍后调用handleQueryResponse时才定义它。因此，请确保在drawVisualization中定义了“数据”。

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

<!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>


谷歌可视化API示例
load（'visualization'，'1.1'，{packages:['corechart'，'controls']}）；
var数据；
var数据表；
var仪表盘；
load（“可视化”、“1”、{packages:[“控件”]}）；
setOnLoadCallback（drawVisualization）；
函数setupData（）{
var control=new google.visualization.ControlWrapper({
“controlType”：“ChartRangeFilter”，
“集装箱ID”：“控制”，
“选项”：{
//按日期轴过滤。
“filterColumnIndex”：0，
“用户界面”：{
“图表类型”：“线条图”，
“图表选项”：{
'chartArea'：{'width'：'90%}，
“哈克斯