Google Analytic Embed API图表:响应式 [英] Google Analytic Embed API chart: Responsive
问题描述
如何使此Google Analytic Embed API图表具有响应性?我注意到此页面上的演示是响应式的: https://ga -dev-tools.appspot.com/embed-api/basic-dashboard/
How would I make this Google Analytic Embed API chart responsive? I noticed that the demo on this page is reponsive: 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
I have also seen various ways of doing this with Google Charts here 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>
推荐答案
我使用的是 google analytics API ，但我遇到了同样的问题，但是通过添加
I was using google analytics API and I had the same issue but it worked for me by adding
选项:{width:'100％'}
options:{width:'100%'}
chart: {
type: 'LINE',
container: 'timeline',
options: {width: '100%'}
}
这篇关于Google Analytic Embed API图表:响应式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
