CSS 그래프, 차트 등으로 데이터 시각화

방문자가 초 이내에 콘텐츠를 이해할 수있게하는 열쇠이기 때문에 좋은 데이터 프리젠 테이션은 웹 산업에서 중요한 측면입니다.. 귀하의 방문자가 귀하의 웹 컨텐츠를보다 쉽고 빠르게 획득할수록, 귀하의 전문성을 프레젠테이션 처리에 반영합니다.. 알맞은 데이터 표현의 기준은 간단하면서도 설명력이 뛰어나고 정교해야하지만 사용자의 관심을 유지하고 콘텐츠를 소화하기 위해 땀을 흘리지 않아야하며 비교하기 쉽고 마지막으로 사용자가 의사 결정을 내릴 수 있거나 데이터를 손쉽게 제시 할 수 있어야합니다. 이러한 정신 이상 기준이 들릴 수도 있듯이, 가능합니다..

오늘의 글에서, 우리는 아름답고 재미있는 다양한 접근 방식으로 당신을 타고 싶어합니다. CSS / HTML을 기반으로 한 창조적 인 데이터 시각화 도구. 예 복사하여 붙여 넣기 한 다음 원하는대로 사용자 정의하십시오. 이러한 차트는 데이터를 가로 / 세로 형식으로 표시하는 CSS 막대 그래프, 데이터 구성 또는 심지어 선 그래프 및 원형 차트에 대한 드롭 다운 목록 일 수 있습니다.!

더 원해? 스크롤 유지!

수평 Barchart

CSS를 사용하여 액세스 가능한 가로 막 대형 차트로 개요로 통계 수치를 표시하는 간단한 방법입니다. 막대는 사용 된 값 셀과 레이블을 계산합니다. 음성 텍스트 클래스를 사용하여 테이블 머리글 사용

CSSplay

막 대형 차트는 스타일과 클래스가 정의 된 최종 목록입니다. 첫 번째 차트에는 값이 100 %에 가까워지면서 두 번째 차트에서 수정되는 오류가 있습니다. 참조 용 소스 코드 포함.

백분율 막대 그래프

CSS의 백분율 너비 기능을 사용하여 백분율 기반 막대 그래프가이 자습서에서 만들어집니다. 수평 막대 그래프에서 왼쪽에서 오른쪽으로 길이를 이동하도록 마커를 설정하거나 동일한 기술을 사용하여 세로 그래프를 만들고 여러 번 재생할 수 있습니다

맥스 디자인

Russ Weakley는 백분율 및 배경 이미지를 기반으로 그래프를 작성하도록 안내합니다. 연결된 코드 및 이미지를 복사하여 프로젝트에서 사용할 수 있습니다..

수직 바 카르 트

개별 막대의 높이, 막대 그룹의 Y 축 및 데이터 세트의 스타일을 지정하는 클래스를 사용하여 간단한 목록을 작성하여 CSS 및 PHP를 사용하여 세로 막 대형 막대 그래프를 작성하십시오. Eric Meyer는 동일한 기술을 사용하여 막대 그래프, 선 그래프, 뾰족한 그래프 및 3D 그래프로 전환하도록 안내합니다.

순수한 CSS 선형 도형

선 그래프는 숫자가있는 테이블보다 훨씬 빠르게 정보를 전달합니다. HTML을 사용하여 CSS로 라인 그래프를 만들고 텍스트를 이미지로 대체하고 CSS 스프라이트와 절대 위치를 사용하여 선 그래프를 얻는 법을 배웁니다..

단순 선 그래프

DHTML과 CSS 만 사용하는 매우 간단한 선 그래프와 그래프의 투명한 배경을 설정할 수있는 곳. 이 그래프는 더 빨리로드되고 나머지 페이지와 혼합됩니다..

Mgraph

이 Ajax 그래프는 매월 CSS 및 XHTML을 사용하여 1 년 단위의 데이터를 나타 내기 위해 사용되며 Firefox 및 Opera에서 실행됩니다

다중 열리스트

Paul Novitski는이 기사에서 CSS를 사용하여 다중 열 목록을 작성하도록 안내합니다. 그는 분할 목록을 떠 다니는 것, HTML 속성으로 번호를 매기는 것, CSS로 만든 내용, XHTML, CSS 등으로 목록을 감싸는 것과 같은 다중 열 목록을 얻는 기술을 많이 논의하고 마지막으로 작은 스타일과 배경 이미지를 추가하여 다중 열 완벽하게 나열하다.

글 머리 기호

총알 그래프는 단일 측정 값을 하나 이상의 다른 측정 값과 비교하고 성능의 질적 범위를 표시합니다. 데이터 기반 사이트의 경우 매우 유연합니다. CSS / HTML을 사용하여 글 머리 기호 그래프 작성 방법 배우기.

기둥 막대 그래프

열 막대 그래프는 지정된 값에 따라 다양한 높이에 도달하는 컬러 세로 막대로 값이 표시되는 CSS를 사용하여 작성됩니다. 이 그래프는 값을 직접 여기에 인쇄하기 때문에 우리에게 명확한 아이디어를 신속하게 제공합니다. CSS 선택기, 스프라이트, 목록 스타일링 등을 사용하여 자습서에서 열 그래프를 만드는 법을 배웁니다..

가동 중지 시간 그래프

중단 시간 그래프는 처음에는 제한된 화면 영역에서 긴 시간 간격을 표시하고 월간 일정 패러다임에 의해 명확히 밝혀진 이벤트의 투명한 레이아웃을 유지하는 데 문제가있었습니다. onMouseOver ()는 계속 실행되며 다른 유형의 중단 시간 이벤트에 다른 색상이 사용됩니다..

동적 라이브 CSS 그래프

웹 서버가 실행하는 ping의 응답 시간을 표시하는 라이브 동적 CSS 그래프는 CSS 및 JavaScript 코드, AJAX 함수 및 그래프 슬라이딩을 사용하여 웹 서버에서 데이터를 읽습니다..

수평 막대 그래프

막대 그래프는 항상 비 수직적 일 필요는 없습니다. 가로 막대 그래프를 만들 수도 있습니다. 이 기사에서는 '가로 그래프'클래스를 사용하고 CSS를 사용하여 마크 업에서 그래프의 높이를 지정하여 다양한 색상 변형을 갖는 가로 막대 그래프를 만듭니다.

다중 도형

이미지 테이블을 사용하지 않는 선 그래프는 CSS 및 DHTML로 빠르게로드되고 배경은 투명으로 변경할 수 있습니다..

생산 계획 그래프

프로덕션 계획 그래프는 그래프 클래스로 그래프 컨테이너를 사용하고 hLine은 분리 선 그리기를 위해 vLine을 사용하여 생성됩니다. 이 그래프는 인트라넷 응용 프로그램에서 사용됩니다. 그래프의 폭은 작업 변경 횟수를 사용하여 표시된 일수와 높이에 따라 계산됩니다..

샌드위치 그래프

샌드위치 그래프는 막대 그래프의 단일 막대가 여러 줄로 나뉘어 질 때 생성됩니다. 단 하나의 줄의 높이가 전체 경향을 나타낼 수있는 반면 단일 층의 높이는이 층의 일부를 나타냅니다. 이 자습서에서 CSS 샌드위치 그래프 만들기.

누적 막대 그래프

누적 그래프의 경우 정의 목록을 사용하여 데이터를 표시 한 다음 여백과 채우기가 모든 브라우저에서 동일하게 표시되도록 재설정됩니다. 누적 막대를 가져 오려면 축이 추가되고 스타일이 적용됩니다. 이 자습서에서는 모든 세부 사항을 자세히 설명합니다..

간단한 막대 그래프

CSS와 PHP를 사용하여 만든 막대 그래프는 여백에 사용되는 많은 계산없이 그래픽 라이브러리를 사용하지 않습니다. 패딩은 단지 사용 된 기술을 이해하기 쉽도록 만듭니다.