javascript 예제모음

당신이 볼 수 있듯이, AnyChart JS 라이브러리와 자바 스크립트 차트를 만드는 데 어려운 아무것도 없다. AnyChart 문서 및 API를 방문하여 프로젝트 및 웹 사이트에 대한 대화형 HTML5 차트를 구축하고 조정하는 것에 대한 모든 것을 알아보십시오. 실험의 기초로 위에 만든 샘플을 가지고 AnyChart와 차트를 탐구 주시기 바랍니다. JS 차트 샘플의 전체 코드도 태그로 작성됩니다. 두 줄 더 추가: 기억해야 할 대로 모든 JavaScript 차트 샘플 코드가 태그 안에 작성되어야 함을 명시했습니다. 데이터 시각화와 관련하여 가장 먼저 필요한 것은 데이터 자체입니다. 이제 간단한 차트 샘플을 만들면서 몇 가지 간단한 데이터를 정렬해 보겠습니다. 이제 자바 스크립트 차트 유형을 지정합니다. AnyChart가 제공하는 차트 유형의 전체 목록은 지원되는 차트 유형 목록에서 찾을 수 있습니다. 샘플에서는 데이터 변수에 지정된 데이터를 사용하여 막대 차트 유형을 선택합니다. 자바스크립트를 사용하여 동적 진행률 표시줄 만들기(애니메이션) : 배열을 전달하는 경우(아래 예제와 같이) 색상이 레이블에 할당되고 해당 배열에서 동일한 인덱스를 공유하는 번호가 할당됩니다. 즉, 아래의 « 아프리카 »가 첫 번째 레이블인 #3e95cd(첫 번째 색상) 및 2478(첫 번째 숫자)으로 설정됩니다. 첫째, 페이지가 준비될 때까지 기다리는 함수 넣기: 모든 데이터 집합 개체 내의 각 데이터 배열에 여러 개체(x, y 및 x 설정)를 전달할 수 있지만(각 개체는 새 거품을 만듭니다)하지만 이 예제에서는 모든 bu를 원하기 때문에 배열당 하나의 개체만 사용합니다.

독특한 색상과 라벨을 갖습니다. 선도표는 선을 위해 유형을 설정하여 작성됩니다. 기본적으로 선에는 선과 x축 사이의 영역을 덮는 진한 투명 채우기가 함께 제공됩니다. 이러한 채우기는 다른 줄을 난독 처리하는 경향이 있으므로이 예제의 모든 데이터 집합에서 제거했습니다 (false 채우기). 형식은 여전히 막대로 설정되어 있지만 데이터 집합에 두 개 이상의 개체를 전달하면 Chart.js는 모든 개체에 대해 새 막대 그룹을 만듭니다. 그런 다음 해당 막대 그룹의 색상을 배경으로 색상을 전달하여 수행됩니다. 위의 예에서는 세계 행복 보고서의 행복 지수를 사용하여 국가의 Y 위치, 국제 통화 기금의 GDP 추정치를 사용하여 X 위치를 설정하고 인구 규모를 설정하여 거품의 크기를 설정합니다. (복사해야 하는 코드의 양을 줄이기 위해 예제 코드의 일부 데이터를 제거했습니다.) 즉, 지금 완전히 다른 보이는 우리의 자바 스크립트 막대 차트를 살펴 : 원형 차트는 원형을 설정하여 만들어집니다.