在 Chart.js 图表中从 Google Analytics 加载数据答案

【问题标题】：Load data from Google Analytics in a Chart.js chart在 Chart.js 图表中从 Google Analytics 加载数据
【发布时间】：2018-11-10 10:51:28
【问题描述】：

我的问题是：如何在 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: {}
});

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

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

DD数组示例：

【问题讨论】：

这个数据数组是如何以及从哪里获得的？你没有告诉我们你在问什么有点奇怪
@GaimZz 感谢您的评论！我用路由中的 GET 方法询问数据的方式更新了我的问题。这就是我在应用程序中进一步实现部件之前测试部件的方式。

标签： php laravel google-analytics chart.js google-analytics-api

【解决方案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');

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

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

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

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

See this article 在我的网站上获得更深入的解释。

【讨论】：