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

Posted 2021-05-04

我的问题是：如何在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数组的示例：

答案

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

数据集中的数据作为列表接收$ visitor;

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

See this article在我的网站上进行了更深入的解释。