우리는 두 팀, 즉 TeamA와 TeamB에 대한 라인 차트와 5 경기에 대한 자신의 점수를 만들 것입니다 – match1, match2, … 일치 5. 예를 들어 위의 그래프를 생성하기 위해 두 개의 막대로 설정하고 두 개의 집합을 줄로 설정하고 차트 개체의 형식은 막대로 설정된 네 개의 데이터 개체가 있습니다. 기본적으로 점은 사용자 지정 가중치 입방 보간을 사용하여 플롯됩니다. 그러나 플로팅하는 차트가 수학식 y = f(x)로 정의될 때 입방인터폴레이션모드 키의 값을 더 정확하게 플롯하기 위해 모노톤으로 설정할 수도 있습니다. 플롯 된 베지어 곡선의 장력은 라인에 의해 결정된다긴장 키. 값을 0으로 설정하여 직선을 그릴 수 있습니다. 이 키는 큐비큐티블인터폴레이션 모드의 값이 이미 지정되어 있을 때 무시됩니다. 그리고 프로젝트 폴더 안에 line.html 파일을 만듭니다.
선 그래프 페이지입니다. 표선 차트는 다음 구성 옵션을 정의합니다. 이러한 옵션은 차트에 전달된 옵션을 형성하기 위해 글로벌 차트 구성 옵션인 Chart.defaults.global과 병합됩니다. 차트에서 선을 그리는 경우 직선 그리기가 베지어 곡선보다 성능이 더 우수하기 때문에 베지어 곡선을 사용하지 않도록 설정하면 렌더링 시간이 향상됩니다. Chart.js는 오픈 소스 커뮤니티에서 높은 수준으로 적극적으로 유지됩니다. 최근에 버전 2.0에 도달했으며, 몇 가지 기본적인 구문 변경 사항으로 인해 코드를 보다 일관되게 만들고 모바일 지원을 제공합니다. 이 문서에서는 Chart.js 2.0을 사용 하 고 업데이트 된 구문을 사용 하 여 보겠습니다. 이 문서의 끝에서 Chart.js 2.0의 작동 방식을 볼 수 있는 기회를 제공한 후 1.0 -> 2.0 전환을 다루는 섹션과 온라인에서 이전 Chart.js 예제를 읽을 때 예상되는 사항들이 있습니다. 당신은 또한 하나의 차트에 여러 줄을 플롯하고 다음과 같이 그들 각각을 그릴 수있는 다른 옵션을 제공 할 수 있습니다 : 예를 들어, spanGaps = 당신이 할 수있는 모든 라인 차트를 구성하는 경우 : 당신이 많은 데이터 요소가있는 경우, 그것은 t의 렌더링을 사용하지 않도록 더 수행 할 수 있습니다 그는 데이터 집합에 대해 줄을 서서 점만 그립니다.
이렇게 하면 캔버스에 그리는 것이 줄어들어 렌더링 성능이 향상됩니다. 선도표는 선을 위해 유형을 설정하여 작성됩니다. 기본적으로 선에는 선과 x축 사이의 영역을 덮는 진한 투명 채우기가 함께 제공됩니다. 이러한 채우기는 다른 줄을 난독 처리하는 경향이 있으므로이 예제의 모든 데이터 집합에서 제거했습니다 (false 채우기). RGBA에 HEX 색상을 변환하려면이 hex2rgba 온라인 컨버터를 사용합니다. 이 자습서에서는 Chart.js의 꺾은도 및 막대 차트의 모든 측면을 다루었습니다.
