Chart.js를 사용하여 데이터를 대화 형 다이어그램으로 변환

2/2 페이지 : Chart.js 사용 : 11-20 단계

11. 파이 착색 개선

패턴을 추가하면 색맹 사용자가 차트에 액세스 할 수 있습니다.

패턴을 추가하면 색맹 사용자가 차트에 액세스 할 수 있습니다.

Chart.js에는 임의의 색상 생성기가 포함되어 있지 않습니다. 색상 배열을 제공하지 않으면 색상이 변경되지 않습니다. 순전히 색상에 기반한 시스템을 설계하는 것은 비효율적이므로 많은 사람들이 색맹으로 고통 받고 있습니다. 문제를 해결하는 좋은 방법은 패턴 도서관.



var mypie = { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], datasets: [{ backgroundColor: [ pattern. draw('square', '#ff6384'), pattern. draw('circle', '#36a2eb'), pattern. draw('diamond', '#cc65fe'), pattern. draw('triangle', '#ffce56'), pattern. draw('square', '#1f77b4'), pattern. draw('circle', '#ff7f0e'), pattern. draw('diamond', '#2ca02c'), pattern. draw('zigzag-horizontal', '#17becf'), pattern. draw('triangle', '#7f7f7f') . . .

12. 패턴 사용

실제로 패턴을 적용하는 것은 어렵지 않습니다. 위와 같이 그림의 이름과 배경으로 사용할 컬러 화면을 사용하여 인스턴스화하면됩니다. 배열에 데이터 필드의 각 멤버를 포함하기에 충분한 요소가 포함되어 있는지 확인하십시오.



13. 툴팁 문제 해결

툴팁 창은 현재 색상 정보를 식별 할 수 없습니다.

최고의 캐논 포인트 및 촬영 필름 카메라
툴팁 창은 현재 색상 정보를 식별 할 수 없습니다.

활성화 된 개발자 도구로 프로그램을 실행하면 흥미로운 문제가 발견됩니다. 차트 요소 위로 마우스 커서를 가져 가면 오류가 나타납니다. 이는 패턴이로드 된 원형 요소에서 색상 정보를 식별 할 수없는 도구 설명 창으로 인해 발생합니다.



당신은 어떻게 아트 디렉터가 되나요?

14. 정보 덮어 쓰기

당면한 문제는 툴팁 요소의 일부를 재정 의하여 해결할 수 있습니다. Chart.js를 사용하면 툴팁 창이 팝업 될 때 호출되는 이벤트 핸들러를 제출할 수 있습니다. 덮어 쓰기 labelColor 이전에 본 경고의 방출을 담당하는 스누핑 알고리즘을 비활성화합니다.

chart = new Chart(ctx, { type: 'pie', options: { maintainAspectRatio:false, tooltips: { callbacks: { labelColor: function(tooltipItem, chart) { return { borderColor: 'rgb(255, 0, 0)', backgroundColor: 'rgb(255, 0, 0)' } }, labelText Color:function(tooltipItem, chart){ return '#543453'; } } } }, data: mypie });

15. 제목 추가

특히 다이어그램을 내보내거나 저장하려는 경우 제목을 추가하면 표시되는 정보의 의미가 향상됩니다. 이 단계 옆에 표시된 코드는 문제를 효과적으로 처리합니다. 글꼴 선택과 같은 추가 사용자 정의는 추가 매개 변수를 사용하여 수행 할 수 있습니다.

var chart = new Chart(ctx, { type: 'line', options: { title: { display: true, text: 'Line Chart' } }, data: myfield

16. 차트 하나 더 추가

이 시점에서 Labels 배열을 포함해야합니다.



이 시점에서 Labels 배열을 포함해야합니다.

지금까지 다이어그램은 한 번에 하나의 정보로 제한되었습니다. 데이터 필드에 두 번째 '수준'을 추가하면 Chart.js가 둘 이상의 데이터 세트로 구성된 차트를 만들도록 동기를 부여합니다. 그만큼 라벨 생략하면 프로그램이 데이터의 일부를 건너 뛰므로 배열이 중요합니다.

var myfield2 = { labels: ['1', '2', '3', '4', '5', '6', '7'], datasets: [{ label: 'My First dataset', backgroundColor: 'rgb(255, 99, 132)', borderColor: 'rgb(255, 99, 132)', data: [0, 10, 5, 2, 20, 30, 45], }, { label: 'My second dataset', fillColor: 'rgba(151,187,205,0.2)', strokeColor: 'rgba(151,187,205,1)', data: [28, 33, 40, 19, 12, 27, 9] }] };

17. 데이터 배열 채우기

레이블의 배열을 생성하는 것은 지루할 수 있습니다. 서수 정보를 쉽게 사용할 수있는 곳에서 정보를 가져온 경우 데이터 배열을 다음과 같은 배열로 채울 수도 있습니다. 포인트[] 필드. 이 경우 아래 표시된 구문을 사용하십시오.

몸에 문신을 포토샵하는 방법
data: [{ x: 10, y: 20 }, { x: 15, y: 10 }]

18. 차트 배치 조정

위에서 언급 한 간격 문제는 배치 다이어그램을 어렵게 만듭니다. Chart.js는 옵션 필드에있는 패딩 속성을 통해이 문제를 해결합니다. 컨테이너의 4 개 여백 각각에 금지 구역을 선언하여 렌더링을 제한 할 수 있습니다.

var chart = new Chart(ctx, { type: 'line', options: { layout: { padding: { left: 30, right: 30, top: 30, bottom:30 } },

19. 전체적으로 레이아웃 설정

각 다이어그램에 레이아웃 설정을 할당하는 것은 지루합니다. 더 스마트 한 접근 방식에는 Chart.defaults.global 요소. Chart.js가 새 다이어그램에 사용할 기본 설정을 노출하며 여러 다이어그램이 나란히 호스팅되는 경우 많은 코드를 저장할 수 있습니다.

document.addEventListener('DOMContentL oaded', function(){ Chart.defaults.global.layout = { padding: { left: 30, right: 30, top: 30, bottom: 30 } };

20. 예제보기

Chart.js 개발자는 예시 세트 작동중인 프레임 워크를 보여줍니다. 다양한 옵션을 살펴보십시오. 일반적으로 소스 코드는 주석이 잘 처리되어 있습니다. 도서관은 또한 함께 제공됩니다 매우 상세한 문서 . 선택한 브라우저에서 간단히 열고 가장 관심있는 분야로 이동하십시오.

이 기사는 원래 크리에이티브 웹 디자인 잡지 인 Web Designer에 게재되었습니다. 281 호 구매 또는 여기에서 구독하세요 .

더 읽어보기 :

예술에서 움직임을 보여주는 방법
  • 1

현재 페이지: Chart.js 사용 : 11-20 단계

이전 페이지 Chart.js 사용 : 01-10 단계