Javascript Google可视化表格图表-更改列名_Javascript_Google Analytics_Google Visualization

Javascript Google可视化表格图表-更改列名

javascript google-analytics google-visualization

Javascript Google可视化表格图表-更改列名,javascript,google-analytics,google-visualization,Javascript,Google Analytics,Google Visualization,我将如何更改Google表格图表中的列名？列名称显示为查询中给定的度量（ga:users | ga:sessions | ga:BoungRate）。我需要将它们显示为：用户|会话|反弹。我必须创建一个新视图吗？或者做一些getcolumnLabel并更改它 <head> <title>Google Charts</title> <script> (function(w,d,s,g,js,fs){ g=w

我将如何更改Google表格图表中的列名？列名称显示为查询中给定的度量（ga:users | ga:sessions | ga:BoungRate）。我需要将它们显示为：用户|会话|反弹。我必须创建一个新视图吗？或者做一些getcolumnLabel并更改它

<head>
    <title>Google Charts</title>

    <script>

    (function(w,d,s,g,js,fs){
        g=w.gapi||(w.gapi={});g.analytics={q:[],ready:function(f){this.q.push(f);}};
        js=d.createElement(s);fs=d.getElementsByTagName(s)[0];
        js.src='https://apis.google.com/js/platform.js';
        fs.parentNode.insertBefore(js,fs);js.onload=function(){g.load('analytics');};
    }(window,document,'script'));
    </script>

    <script type="text/javascript" src="https://www.google.com/jsapi"></script>

    <script>

    gapi.analytics.ready(function() {
    var ACCESS_TOKEN = 'XXX'; // obtained from your service account

    gapi.analytics.auth.authorize({
        serverAuth: {
        access_token: ACCESS_TOKEN
        }
    });

    var data = new gapi.analytics.report.Data({
    query:  {
    ids: 'ga:XXX',
    metrics: 'ga:users,ga:sessions,ga:bounceRate',
    'start-date': '30daysAgo',
    'end-date': 'yesterday',
    output: 'dataTable'
        }
    });
    data.execute();

    data.on('success', function(response) {
    var data = new google.visualization.DataTable(response.dataTable);
    var formatter = new google.visualization.NumberFormat({fractionDigits: 0});
    formatter.format(data, 0);
    formatter.format(data, 1);
    var formatter = new google.visualization.NumberFormat({fractionDigits: 0, suffix: '%'});
    formatter.format(data, 2);
    var table = new google.visualization.Table(document.getElementById('test'));
    table.draw(data);
        });    
    });

    // Load the Visualization API and the chart package.
    google.load('visualization', '1', {'packages':['table']});
    });

    </script>

</head>

<body>             
                <div>
                    <div id="embed-api-auth-container"></div>
                    <div id="test"></div>     
                </div>    
</body>
</html>


谷歌图表
（功能（w、d、s、g、js、fs）{
g=w.gapi | |（w.gapi={}）；g.analytics={q:[]，ready:function（f）{this.q.push（f）；}；
js=d.createElement；fs=d.getElementsByTagName[0]；
js.src=https://apis.google.com/js/platform.js';
fs.parentNode.insertBefore（js，fs）；js.onload=function（）{g.load（'analytics'）；}；
}（窗口、文档、“脚本”）；
gapi.analytics.ready（函数（）{
var ACCESS_TOKEN='XXX'；//从您的服务帐户获得
gapi.analytics.auth.authorize({
serverAuth：{
访问令牌：访问令牌
}
});
var数据=新的gapi.analytics.report.data({
查询：{
ID:'ga:XXX'，
指标：“ga:用户，ga:会话，ga:反弹率”，
‘开始日期’：‘30天Sago’，
“结束日期”：“昨天”，
输出：“数据表”
}
});
data.execute（）；
数据打开（'success'，函数（响应）{
var data=new google.visualization.DataTable（response.DataTable）；
var formatter=new google.visualization.NumberFormat（{fractionDigits:0}）；
格式化程序。格式化（数据，0）；
格式化程序。格式化（数据，1）；
var formatter=new google.visualization.NumberFormat（{fractionDigits:0，后缀：''}）；
格式（数据，2）；
var table=新的google.visualization.table（document.getElementById（'test'）；
表.绘图（数据）；
});    
});
//加载可视化API和图表包。
load（'visualization'，'1'，{'packages'：['table']}）；
});

列标题只是

dataTable

实例中的值，您已经在

success

回调中使用了该实例

要重命名它们，只需执行以下操作：

response.dataTable.cols[0].label = 'Users';
response.dataTable.cols[1].label = 'Sessions';
response.dataTable.cols[2].label = 'Bounce Rate';

此外，您可能意识到代码中存在潜在的竞争条件，也可能意识不到这一点。您正在加载嵌入API，然后执行查询请求，同时也正在加载Google可视化库，如下所示：

google.load('visualization', '1', {'packages':['table']});

虽然嵌入API不太可能在加载gviz库之前加载并运行查询，但这绝对是可能的，如果发生这种情况，您将得到一个错误。

顺便说一句，将来当您提问时，请确保您的代码示例中没有语法错误。你有一些额外的关闭支架，我必须找到并修复，然后才能运行它。另外，请确保所有内容都正确缩进，以便一目了然。非常感谢您抽出时间来帮助我。你是说我应该在嵌入API和查询请求之前加载Google可视化库吗？如果是这样的话，您能给我举个例子说明如何实现这一点吗？您只需要在gviz库加载后运行

gapi.analytics.ready

函数。要做到这一点，请研究一下如何使用这里介绍的load

callback

选项：dataTable.setColumnLabel（1，'Users'）在我的例子中实现了这个技巧