How to Make Bar Chart in PDF | PHP FPDF Tutorial #6

PHP FPDF 튜토리얼 시리즈의 여섯 번째 장에 오신 것을 환영합니다 이 장에서는 PHP FPDF 라이브러리를 사용하여 pdf 문서에서 차트를 만드는 방법을 보여 드리려고합니다

이 장에서는 일차원 데이터 계열을 나타내는 막 대형 차트에 대해서만 다룹니다 이 장에서는 위치를 설정하고 pdf로 도형을 그린 방법을 배웁니다 이것은 우리가하려고하는 것을 미리 보여줍니다 먼저 차트 속성을 정의합니다 제가 부분별로 설명하겠습니다

이것은 차트 경계의 x 및 y 위치입니다 이것은 차트 경계의 차원입니다 이는 차트 경계와 차트 상자 사이의 패딩입니다 이는 차트 상자의 위치와 크기를 나타냅니다 차트 상자의 x 및 y 위치는 차트 위치 및 각각의 패딩에 의해 설정됩니다

차트 상자의 크기는 채우기로 뺀 차트의 경계 크기에서 결정됩니다 차트 데이터 시리즈는이 이미지에서 설명하는 구조로 2 차원 배열로 정의됩니다 dataMax 변수는 각 데이터를 루핑하고 비교하여 결정되는 데이터 시리즈에서 가장 높은 값을 포함합니다 dataStep은 세로 축 레이블의 간격을 정의하는 것입니다 먼저 경계를 보이게하기 위해 직사각형을 그려 봅시다

이렇게하려면이 이미지에서 설명한대로 FPDF Rect () 함수에 매개 변수를 사용하십시오 Output ()을 사용하여 pdf 파일을 출력하는 것을 잊지 마십시오 이제 선에서 시작하여 차트 축을 그려 보겠습니다 이 이미지에서 설명한대로 FPDF Line 함수를 사용하여 매개 변수가있는 선을 그립니다 데이터를 막대 높이로 스케일하는 스케일 인자가 필요합니다

저는이를 스케일 단위라고 부릅니다 이제 각 세로 축 레이블을 그려 보겠습니다 이제 수평축으로 계속하고 막대를 그립니다 상자 너비를 똑같이 데이터의 수로 나눌 필요가 있습니다 셀로 테스트 해 봅시다

이제 각 데이터 계열을 반복 해 보겠습니다 이제 막대를 그려 봅시다 마지막으로 축 캡션 레이블을 추가하십시오 이것으로이 장의 튜토리얼을 마칩니다 이 튜토리얼이 도움이된다면이 비디오를 좋아하십시오

튜토리얼 업데이트를 위해 내 채널을 구독하십시오 질문이 있거나 소스 코드가 필요한 경우, 코멘트 섹션에서 무엇이든 물어보십시오 다음에 보자

Cr8Code – Creating Stick Navigation Bar with JQuery Part.2

안녕하세요, Cr8CodeCo에 오신 것을 환영합니다

이전 튜토리얼에서는 우리의 헤더와 네비게이션 바 이제 어떻게 행동 할 것인지 결정할 것입니다 첫 번째 부분을 보지 않았다면 링크를 클릭하고 먼저 살펴보십시오 우선, 우리는 네비게이션 바를 고수 할 CSS 클래스를 시작합니다 정상에

이를 위해 위치를 고정 된 0 위 및 0으로 설정했습니다 Javascript와 JQuery에 들어가기 전에 나는 당신이 그들에 대한 기본적인 이해가 필요함을 당신이 알기를 바랍니다 계속 나아 갑시다 우리는 문서 준비 함수를 만드는 것으로 시작하여 우리의 스크립트가 준비가 끝날 때까지 대기하도록 지시합니다 자체 준비가되었습니다

그러면 우리가해야 할 일은 탐색 바 높이를 얻는 것입니다 50 픽셀이지만 탐색 바가 다를 수 있습니다 따라서 JQuery로 얻고 그것에 대해 신경 쓰지 않는 것이 좋습니다 우리는 네비게이션 바를 우리의 페이지에서 유일하기 때문에 그것을 요소 이름으로 사용합니다 우리는 그것을 클래스 나 ID를 부여 할 것이고, 우리는 해쉬를 그 다음 id로 놓거나 클래스를 점령 할 것입니다

타겟팅 이제 페이지가 스크롤되면 캡처 할 것입니다 그렇다면 우리는 우리의 기능을 해고 할 것입니다 이제 탐색 막대의 높이와 일치하도록 스크롤 크기를 가져옵니다 탐색 막대의 높이가 스크롤 크기에서 150을 뺀 값보다 작은 경우 즉, 우리의 탐색 바는 페이지 밖에 있습니다 여기서 150은 헤더의 높이입니다

스크립트를 삽입하지 않으면 탐색 모음이 아직 페이지에있는 동안 스크립트가 작동합니다 애니메이션 아래로 슬라이드를 추가하여 탐색 모음의 높이를 설정하는 이유 0으로 설정합니다 그런 다음 우리가 처음 만들었던 fixnav 클래스를 nav 요소에 추가합니다 그 직후, 우리는 네비게이션 바의 높이를 500 픽셀 안에 다시 애니메이션으로 만들 것입니다 밀리 초로 설정하면 슬라이드 다운 효과가 생성됩니다

정지 기능은 애니메이션이 쌓이지 않도록합니다 우리가 가진 것을 보자 우리의 기능은 잘 작동하고 브라우저에 fixnav 클래스 추가, nav 요소 추가, 탐색 막대의 높이가 스크롤 크기에서 150을 뺀 값보다 작은 경우 탐색 막대가 끈적 거리지 않는 것을 제외하고는 예상대로 작동합니다 이 문제를 해결하기 위해 else 함수를 만들고 브라우저에 fixnav를 제거하라고 지시합니다 탐색 막대의 높이가 스크롤 크기보다 작지 않은 경우 클래스입니다 다시 확인합시다

그것은 훌륭하게 작동하지만 또 다른 문제가 있습니다 스크롤 기능은 탐색 막대가 윗쪽에 붙어 있어도 스크롤 할 때마다 반복해서 실행됩니다 이 버그를 방지하려면 우리는 부울 값을 가진 다른 변수를 생성하고 다른 if 함수를 생성 할 것입니다 'checker'인 새 변수가 true인지 확인합니다 sticky 함수를 실행하고 'checker'변수를 false로 변경하십시오

이것은 체커가 맞지 않는 한 다시 발사하는 것을 막을 것입니다 이거 야 마지막으로 'checker'변수를 다시 true로 변경합니다 사용자가 길 그리고 우리는 잘 가게된다

우리의 스티키 네비게이션 바를 사용할 준비가되었습니다