그 스크립트 태그 사이에 “… 내 코드…” 코멘트 우리는 일부 코드를 추가 하는 유일한 매개 변수로 캔버스의 컨텍스트와 새 막대 그래프를 만듭니다. 여백 및 치수와 같은 몇 가지 속성을 설정하고 표시할 값으로 그래프를 업데이트합니다. Chartist.js 예제 페이지에서 다양한 유형의 차트를 탐색하고 재생할 수 있습니다. 차트는 대화형이며 즉석에서 편집할 수 있습니다. 태그에는 그래프가 그려질 캔버스, 막대 그래프 스크립트(barGraph.js) 및 그래프를 설명하는 사용자 지정 스크립트와 같은 몇 가지 주요 항목이 포함되어 있습니다. 인터넷 익스플로러에 대한 지원을 하려면 익스플로러캔버스 스크립트(excanvas.js)를 추가해야 합니다. 다음은 CanvasJS 차트 예제의 대화형 컬렉션입니다. 다른 많은 자바 스크립트 라이브러리와는 달리, D3.js는 상자 밖으로 미리 만들어진 차트와 함께 제공 되지 않습니다. 그러나 D3.js로 빌드된 그래프 목록을 확인하여 개요를 확인할 수 있습니다. 보시다시피 D3.js는 다양한 차트 유형을 지원합니다. CSS3 그래프와 차트에서 스타일을 만드는 수많은 기술이 관련되어 있습니다.

모든 웹 산업에서 는 데이터의 훌륭하고 훌륭한 프레젠테이션이 고객이 분석 내용을 이해하도록 만드는 데 중요한 역할을 합니다. 전문성은 데이터 프리젠 테이션에 반영되어야하며 시청자는 내용을 더 빨리 파악 할 수 있어야합니다. CSS3 차트 또는 그래프를 사용하면 매우 설명적이고 간단 할 수있는 괜찮은 데이터를 제시 할 수 있습니다. 데이터의 효과적으로 비교하는 것이 편리해야 하며 고객은 데이터 프레젠테이션을 통해 올바른 결정을 내려야 합니다. Google 차트에는 그래프의 모양을 변경하는 데 도움이되는 다양한 사용자 지정 옵션이 함께 제공됩니다. 차트는 HTML5/SVG를 사용하여 렌더링되어 iPhone, iPad 및 Android에 교차 브라우저 호환성 및 플랫폼 간 이식성을 제공합니다. 또한 이전 IE 버전을 지원하기 위한 VML도 포함되어 있습니다. 실용적인 예를 살펴보겠습니다.

지난 주에 내 자동차 경적 동작을 나타내는 그래프를 표시하려는 경우 그래프가 어떻게 생겼는지 (금요일은 나쁜 날이었습니다) : 함수 내에서 사용되는 몇 가지 변수를 선언합니다. 또한 “numOfBar”와 같은 몇 가지 변수의 초기 값을 배열 길이로 설정하고 그래프 영역 위치를 0으로 설정하고 그래프 개체의 너비와 높이로 영역 치수를 그래프로 설정합니다. 또한 그래프를 업데이트하는 데 사용할 수 있는 공용 변수 및 함수도 만듭니다. 이러한 공개를 위해 “var” 키워드로 선언하는 대신 “this” 매개 변수를 보강합니다. TOAST UI 차트는 IE8을 포함한 레거시 브라우저를 지원하는 오픈 소스 자바 스크립트 차트 라이브러리입니다. 여기에는 사용자 정의 테마로 사용자 지정할 수 있는 모든 일반적인 차트 유형 및 맵이 포함됩니다. 차트는 콤보 차트(예: 영역이 있는 선 또는 선이 있는 열)에 결합할 수도 있습니다. 예제의 전체 목록을 확인하십시오. amCharts는 의심 할 여지없이 거기 밖으로 가장 아름다운 차트 라이브러리 중 하나입니다. 고급 데이터 시각화를 허용하는 차트와 지리적 맵(지도 차트)을 모두 제공합니다. 마지막으로, 인포그래픽을 빠르게 만들기 위한 몇 가지 간단한 도구가 있습니다. 이전에는 많은 웹 디자이너가 플래시를 사용하여 웹 페이지에 콘텐츠를 표시하지만 현재 그래픽 디자이너는 CSS 그래프와 차트, 자바 스크립트 및 php를 사용하기 시작했습니다.

순수한 CSS3 차트 또는 그래프를 만들 때 매우 상호 작용하고 아름답습니다. 수치 데이터를 표시하는 방법은 여러 가지가 있지만 데이터를 시각화하는 가장 전문적이고 가장 쉬운 방법 중 하나는 CSS입니다. 지금까지 우리는 정적 솔루션 자습서 및 기사를 고려했습니다.