在Chart.js图表​​中加载Google Analytics中的数据

Question

我的问题是：如何在Chart.js图表​​中加载Google Analytics中的数据？

我正在使用Laravel框架（5.6版）编写程序并使用Google AnalyticsAPI（而非Google Analytics Embed API）（版本3）。

我在数组中正确显示数据，但我想在图表中显示它。

子问题：我是否需要使用与Google AnalyticsAPI的连接替换数据集中的数据？

Chart.js的简单图表：

<canvas id="userChart"></canvas>
<script>
    var ctx = document.getElementById('userChart').getContext('2d');
    var chart = new Chart(ctx, {

    // The type of chart we want to create
    type: 'line',

    // The data for our dataset            
    data: {
        labels: ["dag 1", "dag 8", "dag 15", "dag 22", "dag 30"],
        datasets: [{
            label: "users",
            //backgroundColor: '#2f5ec4',
            borderColor: '#2f5ec4',
            data: [138, 163, 115, 124, 49],
        }]
    },
    // Configuration options go here
    options: {}
});

的更新 我如何获取Google Analytics数据的示例：

Route::get('/datatest', function()
{
    $analyticsData = 
    Analytics::fetchTotalVisitorsAndPageViews(Period::days(30));
    dd($analyticsData);
});

DD数组示例：

Answer 1

可能为时已晚，但对于有需要的人，请尝试以下方法。对于您的情况，您有$ analyticsData集合，这是一个不错的开始。 Chartjs使用列表来映射和比较数据。 例如，我们想要查看日期与访客的图表

//transfer all of this code out of the routes to your controller

$analyticsData = Analytics::fetchTotalVisitorsAndPageViews(Period::days(30));

//send these two variables to your view

$dates = $analyticsData->pluck('date');
$visitors = $analyticsData->pluck('visitors');

在您的脚本中，标签应在列表中接收$ date，如下所示；

labels: {!! json_encode($dates) !!},

并且数据集中的数据以列表形式接收$ visitors；

data: {!! json_encode($visitors) !!}

See this article在我的网站上获得更详细的说明。