Question

大家好我正忙着为我的网站构建一个仪表板，我想添加一个显示过去7天会话的图表。我已经设置了我的服务帐户并且我正在接收数据。这是我收到的输出：

[
    {"date":{"date":"2016-08-22 15:38:36.000000","timezone_type":3,"timezone":"UTC"},"visitors":"0","pageViews":"0"},
    {"date":{"date":"2016-08-23 15:38:36.000000","timezone_type":3,"timezone":"UTC"},"visitors":"0","pageViews":"0"},
    {"date":{"date":"2016-08-24 15:38:36.000000","timezone_type":3,"timezone":"UTC"},"visitors":"0","pageViews":"0"},
    {"date":{"date":"2016-08-25 15:38:36.000000","timezone_type":3,"timezone":"UTC"},"visitors":"0","pageViews":"0"},
    {"date":{"date":"2016-08-26 15:38:36.000000","timezone_type":3,"timezone":"UTC"},"visitors":"0","pageViews":"0"}, 
    {"date":{"date":"2016-08-27 15:38:36.000000","timezone_type":3,"timezone":"UTC"},"visitors":"0","pageViews":"0"},
    {"date":{"date":"2016-08-28 15:38:36.000000","timezone_type":3,"timezone":"UTC"},"visitors":"0","pageViews":"0"}, 
    {"date":{"date":"2016-08-29 15:38:36.000000","timezone_type":3,"timezone":"UTC"},"visitors":"1","pageViews":"5"}
]

我的控制器功能如下：

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Http\Requests;
use LaravelAnalytics;

class AdminController extends Controller
{

    public function index(){
        $analytics = LaravelAnalytics::getVisitorsAndPageViews(7);
        return view('admin.index')
            ->with(json_encode($analytics));
    }
}

我忘了提到我正在使用Spatie \ Laravel-Analytics库。我的Javascript看起来像这样呈现演示图表。

var ctx = document.getElementById("sessions");
var sessions = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ["Sunday","Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
        datasets: [{
            label: 'Sessions Last 7 Days',
            data: [4,8, 19, 3, 5, 4, 3],
            backgroundColor: [
                'rgba(52, 73, 94,0.2)'
            ],
            borderColor: [
                'rgba(52, 73, 94,1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        responsive: true,
        legend: {
            display: false
        },
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});

我的问题是如何从json收到的数据显示在图表中？

Answer 1

如果你已经有一个json对象/文件，你可以用json.parse（json var）获取数据，它会返回数据

Answer 2

您从控制器中取了7，但输出为8，请同时检查。然后在您的JS中

var myData = [
   @foreach($analytics as $analis)
      {{ $analis->visitors }}, //remeber to put comma (,) at end for array
   @endforeach
]

data: {
    datasets: [{
        data: myData,
    }]
},

如何使用Chart.js实现Laravel Analytics

2 个答案: