谷歌分析嵌入API服务器端授权定制图表
Google Analytics Embed API Server-side Authorization Customization of Charts
我已经成功设置了谷歌分析的嵌入API服务器端授权,但是我需要自定义一些颜色,就像他们在这里使用常规授权所做的那样:
他们用来获取和样式图表的代码不同于他们给出的代码作为服务器端认证的例子,我试过混合两者,但没有运气。
我假设在本节中有各种各样的选项可以传递:
'options': {
'width': '100%'
}
我已经尝试了一些选项,他们正在使用的常规授权的例子,但只有一个工作(标题):
'options': {
'width': '100%',
'title': 'My chart'
}
我已经粘贴了用于使用服务器端授权获取图表的完整代码:
var dataChart1 = new gapi.analytics.googleCharts.DataChart({
query: {
'ids': 'ga:68742285', // The Demos & Tools website view.
'start-date': '30daysAgo',
'end-date': 'yesterday',
'metrics': 'ga:sessions,ga:users',
'dimensions': 'ga:date'
},
chart: {
'container': 'chart-1-container',
'type': 'LINE',
'options': {
'width': '100%'
}
}
});
dataChart1.execute();
下面是他们使用常规auth来改变颜色的方法:
/**
* Draw the a chart.js line chart with data from the specified view that
* overlays session data for the current week over session data for the
* previous week.
*/
function renderWeekOverWeekChart(ids) {
// Adjust `now` to experiment with different days, for testing only...
var now = moment(); // .subtract(3, 'day');
var thisWeek = query({
'ids': ids,
'dimensions': 'ga:date,ga:nthDay',
'metrics': 'ga:sessions',
'start-date': moment(now).subtract(1, 'day').day(0).format('YYYY-MM-DD'),
'end-date': moment(now).format('YYYY-MM-DD')
});
var lastWeek = query({
'ids': ids,
'dimensions': 'ga:date,ga:nthDay',
'metrics': 'ga:sessions',
'start-date': moment(now).subtract(1, 'day').day(0).subtract(1, 'week')
.format('YYYY-MM-DD'),
'end-date': moment(now).subtract(1, 'day').day(6).subtract(1, 'week')
.format('YYYY-MM-DD')
});
Promise.all([thisWeek, lastWeek]).then(function(results) {
var data1 = results[0].rows.map(function(row) { return +row[2]; });
var data2 = results[1].rows.map(function(row) { return +row[2]; });
var labels = results[1].rows.map(function(row) { return +row[0]; });
labels = labels.map(function(label) {
return moment(label, 'YYYYMMDD').format('ddd');
});
var data = {
labels : labels,
datasets : [
{
label: 'Last Week',
fillColor : 'rgba(220,220,220,0.5)',
strokeColor : 'rgba(220,220,220,1)',
pointColor : 'rgba(220,220,220,1)',
pointStrokeColor : '#fff',
data : data2
},
{
label: 'This Week',
fillColor : 'rgba(151,187,205,0.5)',
strokeColor : 'rgba(151,187,205,1)',
pointColor : 'rgba(151,187,205,1)',
pointStrokeColor : '#fff',
data : data1
}
]
};
new Chart(makeCanvas('chart-1-container')).Line(data);
generateLegend('legend-1-container', data.datasets);
});
}
我将使用这段代码语句。
var options = {
colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6']
};
改变图表颜色的选项位于图表的"选项"下面。我从一个饼状图中抓取了这个代码,所以我不完全确定它将如何与折线图一起工作。玩它,我相信你会找到一种方法来改变颜色的代码,我已经发布。
相关文章:
- 如何使用skip参数使用angular ui引导进行服务器端分页
- Webpack开发服务器和React服务器端渲染
- 提示使用服务器端事件处理程序激活JavaScript
- 使用谷歌应用程序脚本将服务器端数据表返回到客户端
- 如何轻松地将服务器端变量从Java代码转移到客户端代码
- 通过ajax将坐标传递到php服务器端,并在处理后检索到javascript
- 将表单数据提交到服务器端
- 使用ajax的服务器端分页&jQuery
- 显示具有服务器端自动时间注销的同步倒计时计时器
- 使用FormData上传AJAX图像;t在服务器端显示图像
- React路由器服务器端渲染和ajax获取数据
- renderReact/Rect Router+Node/Express.js的服务器端/同构渲染中未定义renderP
- Meteor如何运行服务器端python脚本
- CORS-服务器端cookie没有保存在chrome浏览器上
- 加载服务器端渲染的React组件后执行脚本
- 在Javascript中复制C#服务器端验证
- 在服务器端脚本执行后关闭选项卡
- 如何向服务器端提交javascript变量
- 通过HTTP-Safe发送Google+Hybrid服务器端流一次性授权代码
- 谷歌分析嵌入API服务器端授权定制图表