使用 Chart JS 在 Laravel 中添加图表

17 Mar 2025 | 阅读 2 分钟

在本节中,我们将学习使用 Chart JS 添加图表。我们将使用 Laravel 来完成。Laravel 的 blade 模板引擎非常棒。在 Laravel 视图、JS、JS 库和 PHP 变量可以轻松使用。在我们的 Laravel 应用程序中,我们将使用 Chart.js 库来创建图表。Chart.js 库可以使用面积图、条形图、柱状图、折线图等。我们可以通过使用该库提供的多种图表和主题来使用更多图表。

当我们想在 Laravel 的服务器端添加图表时,以下示例将对我们有所帮助。我们将使用数据库来获取数据,然后,我们将在 Chart JS 函数中设置该数据。在下面的示例中,我们将使用 Chart JS 创建条形图。我们将在我们的 Laravel 应用程序中使用该条形图。在 Laravel 中添加图表的过程描述如下。

首先,我们将使用 routes.php 文件来添加 chartjs 路由。

app/Http/routes.php

之后,我们将使用 HomeController 来添加以下方法。

HomeController 方法

现在,我们将使用我们的 chartjs 视图文件将以下代码添加到该文件中,如下所示

chartjs.blade.php

现在我们的上述代码已经准备就绪,可以运行了。运行后,将生成以下输出:

Add charts in Laravel using Chart JS