google-analytics - Google Analytics(分析)DataChart-如何创建具有多个系列的单个折线图？

我跟踪了3种不同类型的事件。我想为所有这些事件显示一个折线图，以显示每天的事件计数-因此图表中应该有3个数据系列，每个不同的eventLabel一个系列。但是，如果我尝试通过'dimensions': 'ga:date,ga:eventLabel'，则DataChart会抱怨-它给我错误：“给定轴上的所有序列必须具有相同的数据类型”。

因此，我已还原为将所有图表显示为3个单独的折线图。如何将它们合并为1，为每个不同的eventLabel使用不同的颜色线？

  for (var i = 0; i < eventLabels.length; ++i) {
    var chart1 = new gapi.analytics.googleCharts.DataChart({
      query: {
        'ids': myID,
        'start-date': '30daysAgo',
        'end-date': 'today',
        'metrics': 'ga:totalEvents',
        'dimensions': 'ga:date',
        'filters': baseFilters + ";ga:eventLabel==" + eventLabel[i]
      },
      chart: {
        'container': 'chart-' + i + '-container',
        'type': 'LINE',
        'options': {
          'width': '100%'
        }
      }
    });
  }

最佳答案

gapi.analytics.googleCharts.DataChart只能接受一个查询对象。因此，使用它不可能实现您想要的。

您必须创建三个gapi.analytics.report.Data（每个eventLabel一个），然后使用google.visualization.data.join将它们绑在一起，最后使用google.visualization.LineChart将其用于创建折线图。

我已经尝试并测试了以下代码，并且可以正常工作。 （它需要不同的库-图表加载器和jsapi）。

var data1 = new gapi.analytics.report.Data({
    query: {
        'ids': yourId,
        'dimensions': 'ga:date',
        'metrics': 'ga:totalEvents',
        'start-date': '30daysAgo',
        'end-date': 'yesterday',
        'filters': 'ga:eventLabel==' + eventLabel[0],
        'output': 'dataTable'
    }
});

var data2 = new gapi.analytics.report.Data({
    query: {
        'ids': yourId,
        'dimensions': 'ga:date',
        'metrics': 'ga:totalEvents',
        'start-date': '30daysAgo',
        'end-date': 'yesterday',
        'filters': 'ga:eventLabel==' + eventLabel[1],
        'output': 'dataTable'
    }
});

data1.on('success', function(response1) {
    var table1 = new google.visualization.DataTable(response1.dataTable);
    data2.execute();
    data2.on('success', function(response2) {
        var table2 = new google.visualization.DataTable(response2.dataTable);
        var dataFinal = google.visualization.data.join(table1, table2, 'full', [[0,0]],[1],[1]);
        dataFinal.setColumnLabel(1, eventLabel[0]);
        dataFinal.setColumnLabel(2, eventLabel[1]);
        chart.draw(dataFinal, {'interpolateNulls': true});
        chart.draw(google.visualization.arrayToDataTable(response2.rows));
    });
});


data1.execute();
var chart = new google.visualization.LineChart(document.getElementById('timeline'));

希望这能解决您的问题。