Как добавить диаграммы в Laravel 5 с помощью ChartJS — главная тема сегодняшнего обсуждения. В веб-приложении реального времени нам приходится иметь дело с диаграммами. Если вы работаете в сфере финансов, то диаграммы подобны кислороду. Вы не можете думать ни о каком анализе без графиков. Вот почему я создаю пример того, как вы можете добавлять диаграммы в веб-приложение Laravel 5.

☞ Создание веб-приложения с помощью VueJS, Spring Framework и MongoDB

Шаг 1

Создайте один проект Laravel, введя следующую команду.

composer create-project laravel/laravel LaravelCharts --prefer-dist

Перейдите в phpMyAdmin и создайте одну базу данных.

Переключитесь в редактор и отредактируйте файл .env, добавив в него свои учетные данные базы данных.

php artisan migrate

Шаг 2

Нам нужно создать один файл контроллера для управления представлениями и данными. Итак, перейдите в терминал и введите следующую команду.

php artisan make:controller StockController --resource

Создайте одну миграцию и модель также с помощью следующей команды.

php artisan make:model Stock -m

Перейдите к этому файлу миграции, и нам нужно добавить новые поля в таблицу stocks. Замените мой код своим файлом миграции.

<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateStocksTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('stocks', function (Blueprint $table) {
            $table->increments('id');
            $table->string('stockName');
            $table->integer('stockPrice');
            $table->integer('stockYear');
            $table->timestamps();
        });
    }
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('stocks');
    }
}

Выполните следующую команду.

php artisan migrate

Перейдите к файлу routes ›› web.php и добавьте несколько маршрутов, касающихся нашего приложения.

<?php
// web.php
Route::get('stock/add','StockController@create');
Route::post('stock/add','StockController@store');

Перейдите к StockController и верните представление акций из функции create().

<?php
// StockController.php
/**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        return view('Stock');
    }

Создайте одну форму для ввода данных в базу данных. Мы создаем диаграмму анализа фондового рынка. Итак, мы сравниваем цену акции с ее периодом. Сейчас мы создаем одну форму.

<!-- Stock.blade.php -->
<!doctype html>
<html lang="{{ config('app.locale') }}">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel</title>
        <!-- Fonts -->
        <link href="{{asset('css/app.css')}}" rel="stylesheet" type="text/css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.3/css/bootstrap-select.min.css">
    </head>
    <body>
        <div class="container">
          <br />
          <form action="{{url('stock/add')}}" method="post">
            {{csrf_field()}}
            <div class="form-group">
               <label for="stockName">Stock Name:</label>
               <input type="text" class="form-control" id="stockName" name="stockName">
             </div>
             <div class="form-group">
               <label for="stockPrice">Stock Price:</label>
               <input type="text" class="form-control" id="stockPrice" name="stockPrice">
             </div>
             <div class="form-group">
               <label for="stockPrice">Stock Year:</label>
               <select class="selectpicker" name="stockYear">
                  <option value="1991">1991</option>
                  <option value="1992">1992</option>
                  <option value="1993">1993</option>
                  <option value="1994">1994</option>
                  <option value="1995">1995</option>
                  <option value="1996">1996</option>
              </select>
            </div>
             <button type="submit" class="btn btn-primary">Submit</button>
          </form>
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.3/js/bootstrap-select.min.js" charset="utf-8"></script>
    </body>
</html>

Теперь запустите сервер, введя следующую команду.

php artisan serve

Перейдите по этому адресу: http://localhost:8000/stock/add

Шаг 3

Чтобы предотвратить исключение массового присваивания, нам нужно добавить защищенное поле $fillable и заполнить его массивом столбцов, необходимых для хранения данных. Перейдите к модели Stock.php и заполните массив $fillable.

<?php
// Stock.php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Stock extends Model
{
    protected $fillable = ['stockName', 'stockPrice', 'stockYear'];
}

Следующим шагом является сохранение значений в базе данных.

<?php
// StockController.php
/**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        $stock = new Stock([
          'stockName' => $request->get('stockName'),
          'stockPrice' => $request->get('stockPrice'),
          'stockYear' => $request->get('stockYear'),
        ]);
        $stock->save();
        return redirect('stocks');
    }

Следующим шагом будет создание индексного представления.

<!-- index.blade.php -->
<!doctype html>
<html lang="{{ config('app.locale') }}">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel</title>
        <!-- Fonts -->
        <link href="{{asset('css/app.css')}}" rel="stylesheet" type="text/css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.3/css/bootstrap-select.min.css">
    </head>
    <body>
        <div class="container">
          <br />
          INDEX PAGE
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.3/js/bootstrap-select.min.js" charset="utf-8"></script>
    </body>
</html>

Кроме того, нам нужно добавить маршрут для представления индекса.

// web.php
Route::get('stocks','StockController@index');

Возвращает представление индексной функции.

// StockController.php
/**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        return view('index');
    }

Шаг: 4

Теперь нам нужно отобразить диаграмму на главной странице. В этом примере я использовал гистограммы. Поэтому, если вы хотите узнать больше о типах, следите за обновлениями на моем веб-сайте, так как я буду размещать один за другим типы диаграмм.

Гистограммы в Laravel

<!-- index.blade.php -->
<!doctype html>
<html lang="{{ config('app.locale') }}">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel</title>
        <!-- Fonts -->
        <link href="{{asset('css/app.css')}}" rel="stylesheet" type="text/css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.3/css/bootstrap-select.min.css">
    </head>
    <body>
      <div class="row">
       <div class="col-md-10 col-md-offset-1">
           <div class="panel panel-default">
               <div class="panel-heading"><b>Charts</b></div>
               <div class="panel-body">
                   <canvas id="canvas" height="280" width="600"></canvas>
               </div>
           </div>
       </div>
     </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.3/js/bootstrap-select.min.js" charset="utf-8"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.js" charset="utf-8"></script>
        <script>
        var url = "{{url('stock/chart')}}";
        var Years = new Array();
        var Labels = new Array();
        var Prices = new Array();
        $(document).ready(function(){
          $.get(url, function(response){
            response.forEach(function(data){
                Years.push(data.stockYear);
                Labels.push(data.stockName);
                Prices.push(data.stockPrice);
            });
            var ctx = document.getElementById("canvas").getContext('2d');
                var myChart = new Chart(ctx, {
                  type: 'bar',
                  data: {
                      labels:Years,
                      datasets: [{
                          label: 'Infosys Price',
                          data: Prices,
                          borderWidth: 1
                      }]
                  },
                  options: {
                      scales: {
                          yAxes: [{
                              ticks: {
                                  beginAtZero:true
                              }
                          }]
                      }
                  }
              });
          });
        });
        </script>
    </body>
</html>

Теперь у меня есть запрос «Использовать Ajax» для извлечения данных из базы данных. Итак, сначала мне нужно определить один маршрут для этого, и я публикую код маршрутизации для него.

// web.php
<?php
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('/', function () {
    return view('welcome');
});
Route::get('stock/add','StockController@create');
Route::post('stock/add','StockController@store');
Route::get('stocks','StockController@index');
Route::get('stock/chart','StockController@chart');

Нам нужно закодировать функцию диаграммы StockController. Я только что создал образец диаграммы Индийской фондовой компании под названием Infosys.

<?php
// StockController.php
  /**
     * Fetch the particular company details
     * @return json response
     */
      public function chart()
      {
        $result = \DB::table('stocks')
                    ->where('stockName','=','Infosys')
                    ->orderBy('stockYear', 'ASC')
                    ->get();
        return response()->json($result);
      }

Шаг: 5

Если вы правильно включили все библиотеки JS, а также у вас есть правильные значения в базе данных в отношении диаграмм, перейдите по следующему URL-адресу.

http://localhost:8000/stocks

Если вы ничего не видите, перейдите сначала по этому URL-адресу.

http://локальный:8000/сток/добавить

Добавьте некоторые акции и их значения в базу данных по годам. Потом снова по маршруту.

http://локальный:8000/акции

Скачать проект на Github

Шаги по использованию кода Github

  1. Клонируйте репо в свой локальный.
  2. Перейдите в корень проекта и выполните команду «обновление композитора».
  3. Отредактируйте файл .env и используйте свои учетные данные базы данных MySQL.
  4. Я использовал компанию «Infosys», поэтому, если вы хотите использовать эту диаграмму, используйте либо мою базу данных, поскольку я также помещаю файл stocks.sql в корень проект на GitHub или вам нужно изменить этот запрос на выборку данных, чтобы использовать ваш элемент или компанию так, как вы хотите.
  5. Теперь нам нужно загрузить сервер Laravel, поэтому запустите «php artisan serve».
  6. Если вы используете мою базу данных, перейдите по следующему URL-адресу: http://localhost:8000/stocks.
  7. Если нет, то перейдите по этому URL-адресу: http://localhost:8000/stock/add
  8. Теперь добавьте акции конкретной компании
  9. Снова перейдите по этому URL-адресу: http://localhost:8000/stocks

Предложить

☞ Vue JS 2 — Полное руководство (включая Vuex)

☞ Vue JS: от новичка до профессионала

☞ Изучите введение Vue JS в простой реактивный JavaScript

☞ Vue JS: от новичка до профессионала

☞ Vue JS — освоение веб-приложений