Laravel Google 折线图 - PHP

本文将介绍如何在 Laravel 中使用 Google 折线图来呈现数据。Google 折线图能够直观地展示数据的趋势和变化，是数据可视化的重要工具之一。

环境要求

• PHP >= 7.2
• Laravel >= 5.8
• Google Charts 插件

安装 Google Charts 插件

可以通过以下方式安装 Google Charts 插件：

npm install google-charts

创建数据源

在 Laravel 中展示 Google 折线图需要一个数据源。我们可以使用 Eloquent 或者其他 ORM 来从数据库中获取数据，也可以使用 API 获取数据。

例如，我们有一个 orders 表，其中包含每天的订单数量，我们可以创建一个方法来获取数据：

public function getOrderData()
{
    $orders = Order::select(DB::raw('DATE(created_at) as date'), DB::raw('count(*) as count'))
                ->groupBy('date')
                ->orderBy('date', 'asc')
                ->get()
                ->toArray();

    $data = [['Date', 'Count']];

    foreach ($orders as $order) {
        $data[] = [$order['date'], $order['count']];
    }

    return json_encode($data);
}

创建 Google 折线图

我们需要在视图中创建一个 div 元素来显示折线图：

<div id="chart_div"></div>

然后，我们可以在 JavaScript 中创建 Google 折线图：

// 导入 Google Charts 插件
import { google } from 'google-charts';

// 获取数据
const data = JSON.parse({{ $orderData }});

// 创建 Google 折线图
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  const chartData = google.visualization.arrayToDataTable(data);

  const options = {
    title: 'Order count',
    hAxis: {title: 'Date',  titleTextStyle: {color: '#333'}},
    vAxis: {minValue: 0},
    curveType: 'function',
    legend: { position: 'bottom' }
  };

  const chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(chartData, options);
}

结论

通过上述步骤，我们可以在 Laravel 中使用 Google 折线图来展示数据。Google Charts 提供了众多图表类型和样式，可以根据需求进行定制。