gpt4 book ai didi

javascript - Google Analytics 嵌入 API 图表 : Responsive

转载 作者:行者123 更新时间:2023-11-28 07:44:50 25 4
gpt4 key购买 nike

如何使此 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>

最佳答案

我在这里回答了这个问题

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

基本上,您只需添加一个选项元素并在图表选项元素内分配 x% 的宽度

关于javascript - Google Analytics 嵌入 API 图表 : Responsive,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27556273/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com