谷歌可视化表格图表 - 更改列名答案

【问题标题】：Google Visualization Table Chart - changing column names谷歌可视化表格图表 - 更改列名
【发布时间】：2014-12-20 05:24:58
【问题描述】：

如何更改 Google 表格图表中的列名？列名称显示为查询中给定的指标 (ga:users | ga:sessions | ga:bounceRate)。我需要将它们显示为：用户 |会议 |跳出率。我必须创建一个新视图吗？或者做某种 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>

【问题讨论】：

顺便提一下，以后你提问的时候，请确保你的代码示例中没有语法错误。你有一些额外的右括号，我必须先找到并修复它们，然后才能运行它。此外，请确保所有内容都正确缩进，以便一目了然。

标签： javascript google-analytics google-visualization

【解决方案1】：

列标题只是dataTable 实例中的值，您已经在success 回调中使用了这些值。

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

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

此外，您可能会也可能不会意识到您的代码中存在潜在的竞争条件。您正在加载 Embed API，然后执行查询请求，并且您还正在加载 Google 可视化库，如下所示：

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

虽然 Embed API 不太可能在加载 gviz 库之前加载并运行查询，但绝对有可能，如果发生这种情况，您会收到错误消息。

【讨论】：

非常感谢您抽出宝贵时间帮助我。你是说我应该在嵌入 API 和查询请求之前加载谷歌可视化库吗？如果是这样，你能告诉我一个如何做到这一点的例子吗？
只有在加载 gviz 库后，您才需要运行 gapi.analytics.ready 函数。为此，请考虑使用此处记录的负载 callback 选项：developers.google.com/loader/#GoogleLoad
dataTable.setColumnLabel(1, 'Users') 在我的情况下成功了