时间戳

首页 > 解决方案 > 在 Chart.js 图表中从 Google Analytics 加载数据

php - 在 Chart.js 图表中从 Google Analytics 加载数据

问题描述

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

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

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

子问题：我是否需要将数据集中的数据替换为与 Google Analytics API 的连接？

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: {}
});

更新： 我如何获取分析数据的示例：

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

DD 数组示例：

DD数组

标签： phplaravelgoogle-analyticschart.jsgoogle-analytics-api

解决方案

可能为时已晚，但对于有需要的人，请尝试以下方法。对于您的情况，您有 $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');

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

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

数据集中的数据接收 $visitors 作为列表；

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

有关更深入的解释，请参阅我网站上的这篇文章。

推荐阅读