谷歌分析嵌入API服务器端授权定制图表

Google Analytics Embed API Server-side Authorization Customization of Charts

本文关键字:授权 服务器端 API 谷歌      更新时间:2023-09-26

我已经成功设置了谷歌分析的嵌入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']
};

改变图表颜色的选项位于图表的"选项"下面。我从一个饼状图中抓取了这个代码,所以我不完全确定它将如何与折线图一起工作。玩它,我相信你会找到一种方法来改变颜色的代码,我已经发布。