PHP에서 막대 차트를 사용하는 방법
7008 단어 phpphppractices
오늘 우리는 응용 프로그램이나 사용하려는 모든 곳에서 php와 함께 막 대형 차트를 사용하는 방법을 배울 것입니다. 판매 차트, 구매 차트, 수익 차트 및 활동 차트 등과 같은 일부 짧은 값에 차트를 사용하는 경우 코드에 라이브러리를 삽입하기만 하면 반응형 차트를 작성하는 데 사용할 수 있는 많은 라이브러리가 있는 것과 같은 많은 옵션이 있습니다. . 오늘 나는 같은 일을 할 것입니다. 우리가 어떻게 할 것인지 봅시다.
저는 Chart.js을 사용할 것입니다. 오픈 소스이고 두 번째로 여러 차트 옵션이 있기 때문에 보통 사용합니다. 처럼
그리고 더 많은. 그러나 우리는 막대 차트를 사용할 것입니다.
막대 차트를 사용하기 위해 빈 페이지 만들기
이 빈 페이지를 생성함으로써 빌드된 구성요소에서 사용하기 위해 부스트랩 css cdn도 사용할 것입니다.
빈 페이지를 만들면 새 데이터가 포함된 차트가 생성되고 동적 데이터가 있을 때 데이터가 수동이 되어 그에 따라 관리할 수 있습니다.
글쎄, 우리가 어떻게 할 수 있고 주요 부분으로 넘어 갑시다. 빈 페이지를 만들겠습니다. 그런 다음 해당 페이지에 카드 div를 추가합니다. 방법을 참조하십시오 :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Charts Implementation</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container d-flex align-items-center justify-content-center " style="min-height: 600px;">
<div class="row">
<div class="card">
<div class="card-content">
<div class="card-body">
<div class="card-title">
This is card
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
출력은 몸의 중심에서 I div입니다.
이 div를 만든 후 여기에 몇 가지 차트를 사용하고 어떻게 사용할 수 있는지 살펴보겠습니다. 우리는 또한 일부 동적 데이터와 일부 수동 데이터로 시도할 것입니다. 또한 화면에서 변경할 수도 있습니다.
이 튜토리얼에서 모든 것을 다룰 것입니다.
이제 chart.js Cdn을 포함하고 차트 인터페이스 구현을 시작하십시오.
앞에 설명서 버튼이 보입니다.
시작하는 것부터 CDN 링크를 얻을 수 있으므로 그렇지 않으면 코드에 포함할 수 있습니다. 여기에서 복사할 수 있으며 작동하지 않으면 거기에서 복사할 수 있습니다.
Chart.js CDN 구현
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
그런 다음 스크립트를 통해 일부 데이터를 추가했고 사용자 지정 데이터를 통해 차트를 만드는 것이 매우 쉬워졌습니다.
데이터 구조 생성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Charts Implementation</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<script>
const labels = ['march', 'april', 'may', 'jun', 'july', 'Aug', 'Sep'];
const data = {
labels: labels,
datasets: [{
label: 'My First Dataset',
data: [65, 59, 80, 81, 56, 55, 40],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 205, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(201, 203, 207, 0.2)'
],
borderColor: [
'rgb(255, 99, 132)',
'rgb(255, 159, 64)',
'rgb(255, 205, 86)',
'rgb(75, 192, 192)',
'rgb(54, 162, 235)',
'rgb(153, 102, 255)',
'rgb(201, 203, 207)'
],
borderWidth: 1
}]
};
</script>
<div class="container d-flex align-items-center justify-content-center " style="min-height: 600px;">
<div class="row">
<div class="card" >
<div class="card-content">
<div class="card-body">
<canvas id="chart2" style="min-height: 300px;" width="400" height="100">
<p>Hello Fallback World</p>
</canvas>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const config = {
type: 'bar',
data: data,
options: {
scales: {
y: {
beginAtZero: true
}
}
},
};
const myChart = new Chart(
document.getElementById('chart2'),
config
);
</script>
</body>
</html>
index.php 파일에 이 코드를 구현한 후 막대 차트의 멋진 모습을 볼 수 있습니다.결론
응용 프로그램에서 막대 차트를 쉽게 사용하는 방법을 이해하시기 바랍니다. 레이블 배열과 데이터 세트를 변경하고 조작할 수 있지만 막대에 원하는 색상을 지정할 수 있습니다.
그것이 당신을 도울 수 있기를 바랍니다. 감사합니다Larachamp
게시물 How to Use A Bar Chart in PHP이 Larachamp에 처음 나타났습니다.
Reference
이 문제에 관하여(PHP에서 막대 차트를 사용하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/gurpreetkaitcode/how-to-use-a-bar-chart-in-php-2502텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
