Biểu đồ đường trong php

Đây là một mẫu sử dụng Biểu đồ. js https. //colorlib. com/polygon/gentelella/index. html, chắc chắn các bạn cũng như mình đều sẽ thấy bảng giao diện trong trang web của họ rất hiện đại và dễ hiểu. Đấy là nhìn về mặt giao diện, còn về mặt mã hóa, ta cũng rất dễ dàng để tạo ra được những biểu đồ như thế, nhờ Chartjs. Chỉ cần vài tiếng đồng hồ là bạn có thể sử dụng thư viện này 1 cách thuần thục rồi. Để các bạn không mất thời gian đọc docs thì hôm nay mình xin giới thiệu cơ bản về Chartjs để các bạn có thể áp dụng vào trang web của mình

Tải xuống/Cài đặt

Có 2 cách để các bạn có thể sử dụng Biểu đồ. js that is

• Tải xuống từ trang github. https. //github. com/chartjs/Biểu đồ. js/bản phát hành/thẻ/v2. 5. 0, đơn giản nhất là sử dụng CDN. https. //cdnjs. com/thư viện/Biểu đồ. js
• Cài đặt nó thông qua npm hoặc bower bằng câu lệnh sau. npm.

  <script src="{{ asset('js/Chart.js') }}">script>
  Code language: HTML, XML (xml)

  0 cúi đầu.

  <script src="{{ asset('js/Chart.js') }}">script>
  Code language: HTML, XML (xml)

  1

Ứng dụng demo của mình sử dụng Laravel 5. 4 và npm nên mình chọn cách cài đặt qua npm as on

Sau khi cài đặt, bạn phải sử dụng 

<script src="{{ asset('js/Chart.js') }}">script>
Code language: HTML, XML (xml)

2 để thiết lập nó ở chế độ công khai, truy cập vào 

<script src="{{ asset('js/Chart.js') }}">script>



Code language: HTML, XML (xml)

3 và thêm dòng này ở phía dưới

mix.copy('node_modules/chart.js/dist/Chart.js', 'public/js');
Code language: JavaScript (javascript)

rồi sau đó chạy lệnh 

<script src="{{ asset('js/Chart.js') }}">script>
Code language: HTML, XML (xml)

4, bạn sẽ thấy tệp Biểu đồ. js trong thư mục 

<script src="{{ asset('js/Chart.js') }}">script>
Code language: HTML, XML (xml)

0 của mình. Tiếp theo, bạn thêm dòng này vào trong 

<script src="{{ asset('js/Chart.js') }}">script>
Code language: HTML, XML (xml)

1

<script src="{{ asset('js/Chart.js') }}">script>



Code language: HTML, XML (xml)

Do đó, quá trình cài đặt đã hoàn tất để sử dụng Biểu đồ. js. It's menu must not

Sử dụng biểu đồ. js

Mình xin phép viết 1 đoạn demo nhỏ kèm hình ảnh ngay trong file 

<script src="{{ asset('js/Chart.js') }}">script>
Code language: HTML, XML (xml)

2 như sau.  

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-heading">Dashboarddiv>

                <div class="panel-body">
                    <canvas id="line-chart">canvas>
                div>
            div>
        div>
    div>
div>
@endsection
<script type="text/javascript">
    window.onload = function () {
        Chart.defaults.global.defaultFontColor = '#000000';
        Chart.defaults.global.defaultFontFamily = 'Arial';
        var lineChart = document.getElementById('line-chart');
        var myChart = new Chart(lineChart, {
            type: 'line',
            data: {
                labels: ["Jan", "Feb", "Mar", "Apr", "May", "June"],
                datasets: [
                    {
                        label: 'PHP Activities',
                        data: [80, 30, 63, 20, 110, 3],
                        backgroundColor: 'rgba(0, 128, 128, 0.3)',
                        borderColor: 'rgba(0, 128, 128, 0.7)',
                        borderWidth: 1
                    },
                    {
                        label: 'Ruby Activities',
                        data: [18, 72, 10, 39, 19, 75],
                        backgroundColor: 'rgba(0, 128, 128, 0.7)',
                        borderColor: 'rgba(0, 128, 128, 1)',
                        borderWidth: 1
                    }
                ]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero:true
                        }
                    }]
                },
            }
        });
    };
script>
Code language: HTML, XML (xml)

Nhìn thì tưởng rắc rối nhưng thực ra rất đơn giản, bạn chỉ cần tạo 1 thẻ 

<script src="{{ asset('js/Chart.js') }}">script>
Code language: HTML, XML (xml)

3 để cắm biểu đồ của mình vào, ví dụ như ví dụ của mình là thẻ 

<script src="{{ asset('js/Chart.js') }}">script>
Code language: HTML, XML (xml)

4, tiếp theo đó là 1 đoạn javascript để cấu hình việc hiển thị biểu đồ như thế nào . Đừng lo nếu bạn chưa hiểu những biến được đặt trong javascript kia để làm gì. Mình sẽ giải thích nó ngay dưới đây

Configure Chart

Dữ liệu biểu đồ

Để hiển thị dữ liệu được hiển thị ra màn hình, chúng ta phải khai báo 1 đối tượng Biểu đồ chứa tất cả các thông tin cần thiết mà bạn muốn hiển thị ra. Dưới đây là một số tham số cơ bản mà mình hay sử dụng

TypeMô tảdatasetsArray[object]Chứa dữ liệu cho từng tệp dữ liệu, dữ liệu ở bên trong datasets phụ thuộc vào từng loại biểu đồ khác nhaulabelsArray[string]các nhãn hiển thị trên trục của biểu đồ, nó phụ thuộc vào việc bạn định nghĩa xLabels – lớp

Ở đoạn mã trên của mình thì mình chỉ cần đặt nhãn là 1 mảng nhãn được hiển thị ở trục Ox và các tham số bên trong bộ dữ liệu (vì biểu đồ của mình có 2 dòng nên mình khai báo 2 đối tượng bên trong bộ dữ liệu)

Create chart with the Options

________số 8

Đoạn mã trên của mình chỉ đơn giản là cho trục Oy của biểu đồ bắt đầu từ 0, còn nếu bạn không đặt giá trị này thì biểu đồ của bạn sẽ lấy mặc định bắt đầu từ số nhỏ nhất trong dữ liệu mà bạn đã đặt. Đây là ví dụ đơn giản sử dụng các tùy chọn trong biểu đồ

Configure global

Nghe cái tên toàn cầu thì chắc các bạn cũng hình dung được nhiệm vụ của công việc cấu hình này, nó dùng để cấu hình cho tất cả các loại biểu đồ trong trang của bạn để mỗi khi thay đổi bạn khỏi phải tìm kiếm nó trong từng tùy chọn. . Nó không có gì khác biến toàn cầu được sử dụng trong các ngôn ngữ lập trình

Chartjs or at place là nếu bạn không xác định các tham số này, thì nó sẽ cho bạn giá trị mặc định của từng loại biểu đồ và cân bằng chúng một cách hợp lý nhất. Việc bạn khai báo chỉ là bạn muốn thay đổi bất kỳ giá trị mặc định nào. Như trong bản demo mình làm, mình có tuyên bố 2 giá trị toàn cầu

Chart.defaults.global.defaultFontColor = '#000000';
Chart.defaults.global.defaultFontFamily = 'Arial';
Code language: PHP (php)

Đơn giản là mình sẽ thay đổi màu chữ và phông chữ cho biểu đồ, và nó được áp dụng cho tất cả các loại biểu đồ khác nếu mình muốn vẽ thêm. Bạn có thể tham khảo bảng setting về font chữ dưới đây để hiểu rõ hơn

TypeValue value defaultMô tảdefaultFontColorColor'#666'Xác định màu chữ cho tất cả các textdefaultFontFamilyString“'Helvetica Neue', 'Helvetica', 'Arial', sans-serif”Xác định font chữ cho tất cả các textdefaultFontSizeNumber12Xác định phông chữ cho tất cả

Các cấu hình chung khác của Chart

Các tùy chọn dưới đây, các bạn có thể sử dụng được cho tất cả các loại Biểu đồ. Bạn có thể đặt nó thông qua toàn cầu, hoặc viết nó bên trong các tùy chọn của từng Biểu đồ