Google Analytics Embed API 服務端授權圖表定制

Question

我已經成功地為 Google 分析設置了 Embed 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();

這是他們使用常規身份驗證更改顏色的方法：

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

更改圖表顏色的選項位於圖表的“選項”下。 我從中獲取此代碼的特定圖表是餅圖，因此我不完全確定它將如何與您的折線圖配合使用。 玩弄它，我相信您會找到一種方法來使用我發布的代碼更改顏色。