CodeIgniter 4: Как создать линию Morris и диаграмму с областями в приложении Codeigniter 4
В этом учебном пособии вы узнаете, как получить месячные записи дат из MySQL в приложении codeigniter 4 и реализовать диаграмму с областями Morris и линейную диаграмму в приложении codeigniter 4, используя morris js.
В этом руководстве будет реализована линейная диаграмма и диаграмма с областями в приложении Codeigniter 4 с использованием morris chart js и извлечения записи текущего месяца из базы данных MySQL. И отображать его на диаграммах с областями и линейных диаграммах.
Как создать линию Morris и диаграмму с областями в приложении Codeigniter 4
Шаг 1: Загрузите проект Codeigniter 4
На этом шаге вы загрузите последнюю версию Codeigniter 4. Перейдите по этой ссылке https://codeigniter.com/download Загрузите новую новую установку Codeigniter 4 и разархивируйте установку в вашей локальной системе xampp/htdocs/. И измените имя папки загрузки на «demo».
Шаг 2: Основные конфигурации
Далее вы установите базовую конфигурацию, поэтому давайте перейдем к app/Config/Config.php и откроем этот файл в текстовом редакторе.
Установите базовый URL-адрес следующим образом
public $baseURL = 'http://localhost:8080'; // Замните на: public $baseURL = 'http://localhost/demo/';
Шаг 3: Создайте таблицу в базе данных
На этом шаге вам нужно создать таблицу в базе данных, а также вставить некоторые данные для линейной и площадной диаграммы в codeiginter 4. Итак, зайдите в панель phpmyadmin и выполните в ней следующий sql-запрос:
CREATE TABLE users (
id int(11) NOT NULL AUTO_INCREMENT COMMENT 'Primary Key',
name varchar(100) NOT NULL COMMENT 'Name',
email varchar(255) NOT NULL COMMENT 'Email Address',
contact_no varchar(50) NOT NULL COMMENT 'Contact No',
created_at varchar(20) NOT NULL COMMENT 'Created date',
PRIMARY KEY (id)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 COMMENT='datatable demo table' AUTO_INCREMENT=1;
INSERT INTO users (id, name, email, contact_no, created_at) VALUES
(1, 'Team', 'info@test.com', '9000000001', '2019-01-01'),
(2, 'Admin', 'admin@test.com', '9000000002', '2019-01-02'),
(3, 'User', 'user@test.com', '9000000003', '2019-01-03'),
(4, 'Editor', 'editor@test.com', '9000000004', '2019-01-04'),
(5, 'Writer', 'writer@test.com', '9000000005', '2019-01-05'),
(6, 'Contact', 'contact@test.com', '9000000006', '2019-01-06'),
(7, 'Manager', 'manager@test.com', '9000000007', '2019-01-07'),
(8, 'John', 'john@test.com', '9000000055', '2019-01-08'),
(9, 'Merry', 'merry@test.com', '9000000088', '2019-01-09'),
(10, 'Keliv', 'kelvin@test.com', '9000550088', '2019-01-10'),
(11, 'Herry', 'herry@test.com', '9050550088', '2019-01-11'),
(12, 'Mark', 'mark@test.com', '9050550998', '2019-01-12');Шаг 4: Настройка учетных данных базы данных
На этом шаге вам нужно подключить наш проект к базе данных. вам нужно перейти в app/Config/ и открыть файл Database.php в текстовом редакторе. После открытия файла в текстовом редакторе вам необходимо настроить учетные данные базы данных в этом файле, как показано ниже.
public $default = [
'DSN' => '',
'hostname' => 'localhost',
'username' => 'root',
'password' => '',
'database' => 'demo',
'DBDriver' => 'MySQLi',
'DBPrefix' => '',
'pConnect' => false,
'DBDebug' => (ENVIRONMENT !== 'production'),
'cacheOn' => false,
'cacheDir' => '',
'charset' => 'utf8',
'DBCollat' => 'utf8_general_ci',
'swapPre' => '',
'encrypt' => false,
'compress' => false,
'strictOn' => false,
'failover' => [],
'port' => 3306,
];Шаг 5: Создайте контроллер
На этом шаге посетите app/Controllers и создайте имя контроллера MorrisChart.php. В этом контроллере нужно добавить в него следующие методы:
<?php namespace App\Controllers;
use CodeIgniter\Controller;
use CodeIgniter\HTTP\RequestInterface;
class MorrisChart extends Controller
{
public function index() {
$db = \Config\Database::connect();
$builder = $db->table('users');
$query = $builder->query("SELECT DAY(created_at) as y, COUNT(id) as a FROM users WHERE MONTH(created_at) = '" . date('m') . "'
AND YEAR(created_at) = '" . date('Y') . "'
GROUP BY DAY(created_at)");
$data['chart_data'] = $query->getResult();
return view('home',$data);
}
}Шаг 6: Создайте вид
На этом шаге вам нужно создать один файл представления с именем Home.php и обновить следующий код в вашем файле:
<head>
<meta charset=utf-8 />
<title>Codeigniter 4 Morris Line and Area Chart Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.0/morris.min.js"></script>
</head>
<body>
<h3 class="text-primary text-center">
Morris charts with Codeigniter
</h3>
<div class"row">
<div class="col-sm-12 text-center">
<label class="label label-success">Line Chart</label>
<div id="line-chart" ></div>
</div>
<div class="col-sm-12 text-center">
<label class="label label-success">Area Chart</label>
<div id="area-chart" ></div>
</div>
</div>
</body>Реализовать код jаvascript
Наконец, необходимо реализовать код jаvascript для отображения данных на линии Морриса и диаграмме с областями. Теперь вы обновляете код в теге script после закрытия тега body.
<script>
var serries = JSON.parse(`<?php echo $chart_data; ?>`);
console.log(serries);
var data = serries,
config = {
dаta: data,
xkey: 'y',
ykeys: ['a'],
labels: ['Current Month Date Wise Total Registered Users'],
fillOpacity: 0.6,
hideHover: 'auto',
behaveLikeLine: true,
resize: true,
pointFillColors:['#ffffff'],
pointStrokeColors: ['black'],
lineColors:['gray','red']
};
config.element = 'area-chart';
Morris.Area(config);
config.element = 'line-chart';
Morris.Line(config);
</script>Шаг 7: Создайте маршрут
На этом шаге вам нужно создать маршрут, который отображает таблицу в представлении, поместите следующий код в файл app/Config/Routes.php.
$routes->get('/', 'MorrisChart::index');Шаг 8: Запустите сервер разработки
На этом шаге откройте терминал и выполните следующую команду:
php spark serve
Затем перейдите в браузер и введите ниже URL:
http://localhost:8080
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.