Question

如何使此Google Analytic Embed API图表响应？我注意到此页面上的演示是反复的：https://ga-dev-tools.appspot.com/embed-api/basic-dashboard/

我也在这里看到了使用Google Charts这样做的各种方法 https://code.google.com/p/google-visualization-api-issues/issues/detail?id=1056

<!doctype html>
<html lang="en">
<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>

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

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

    var linechart = new gapi.analytics.googleCharts.DataChart({
    query: {
    ids: 'ga:XXXXXX',
    metrics: 'ga:users',
    dimensions: 'ga:date',
    'start-date': '30daysAgo',
    'end-date': 'yesterday'
      },
    chart: {
    type: 'LINE',
    container: 'line-chart',
    options: {
        width: '100%',
        title: 'Test.com: Visitors over the past 30 days.',
        fontSize: 12
        }
    }
    });

    linechart.on('success', function(response) {
    // response.chart : the Google Chart instance.
    // response.data : the Google Chart data object.
    });

    linechart.execute();        

    });

    </script>

</head>

<body>
                <div>
                    <div id="embed-api-auth-container"></div>
                    <div id="line-chart" style='width:100%;height:300px;'></div>

                </div>    

</body>
</html>

Answer 1

我在这里回答了这个问题

(Google Embed API) How to change chart-table-style width

基本上，您只需在图表选项元素

中添加一个选项元素并指定x％的宽度

Answer 2

我刚刚注意到同样的问题，设置：

options: {
   width: '100%'
}

文档宽度更改时

不起作用（只有'TABLE'图表响应'开箱即用'）。

作为解决方法，您需要在窗口调整大小时触发图表重绘：

window.addEventListener('resize', function() {
    linechart.execute();
});

旁注：

链接的Google页面似乎没有使用此或whatelse解决方法使图表响应但行为是相同的;
如果你的图表中启用了动画，那么这些动画可能会在窗口调整大小时多次播放;

Answer 3

我使用的是 google Analytics API ，但遇到了同样的问题，但是通过添加

选项：{width：'100％'}

chart: {
              type: 'LINE',
              container: 'timeline',
              options: {width: '100%'}
            }

Answer 4

您可以查看您引用的演示页面的source code。

它托管在github上，易于重现。

# Clone the repository.
git clone https://github.com/googleanalytics/ga-dev-tools.git
cd ga-dev-tools

# Install the build dependencies.
npm install
npm run build

# Run the local App Engine server.
path/to/dev_appserver.py .

网站的响应能力可能与带宽或后端基础设施的限制有关。

Google Analytics嵌入API图表：响应

4 个答案: