Google Analytics Embed API Server-side 图表授权定制

Question

我已经成功地为 Google 分析设置了嵌入 API Server-side 授权，但是我需要像他们所做的那样自定义一些颜色 here 使用常规授权：

他们用来获取和设置图表样式的代码与他们作为服务器端身份验证示例给出的代码不同，我试过将两者混合使用，但没有成功。

我假设您可以在本节中通过各种选项：

          'options': {
            'width': '100%'
          }

我尝试了他们在常规授权示例中使用的几个选项，但只有一个有效（标题）：

          'options': {
            'width': '100%',
            'title': 'My chart'
          }

我已经粘贴了用于使用 server-side auth:

获取图表的完整代码

      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();

这是他们使用常规身份验证更改颜色的方法：

     /**
       * 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);
        });
      }

Answer 1

我会玩这个代码语句。

var options = {
    colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6']
};

更改图表颜色的选项位于图表的 'options' 下方。我从中获取此代码的特定图表是饼图，因此我不完全确定它如何与您的折线图一起使用。尝试一下，我相信您会找到一种方法来使用我发布的代码更改颜色。

Google Analytics Embed API Server-side 图表授权定制

Google Analytics Embed API Server-side Authorization Customization of Charts

javascript

google-analytics-api