Chart.js : Radar 및 Polar Area 차트를 시작합니다

이 튜토리얼은 선 및 막대 차트를 다루는 이전 Chart.js 레슨에서 확장됩니다. 여기에서는 레이더 및 극지 면적 차트를 탐색하여 간결한 개요와 자세한 설명을 제공합니다.

레이더 차트 이해

라인 및 막대 차트는 수많은 데이터 포인트 (예 : 아시아 국가의 인구)에서 하나 또는 두 개의 속성을 비교할 때 탁월합니다. 그러나 몇 가지 데이터 포인트 (예 : 3 개의 액체의 특성) 만있는 많은 속성을 비교할 때 레이더 차트가 훨씬 효과적입니다. 스파이더 차트라고도하는 것은 여러 변수를 효율적으로 시각화하고 비교합니다.

Wikipedia에 의해 정의 된 바와 같이, 레이더 차트는 중심점에서 유래 한 축을 사용하여 다변량 데이터를 그래픽으로 나타냅니다. 축의 각도와 상대 위치는 일반적으로 중요하지 않습니다.

첫 번째 레이더 차트를 구축합시다. 우리는 'r'을 'x'또는 'angle'키에서 'false'의 스케일 키로 설정함으로써이를 달성합니다. 마찬가지로, 회전 애니메이션을 비활성화하는 것은 '애니메이션'객체 내에서 '애니 미터 테이트'를 'false'로 설정하여 수행됩니다.

다음 코드는 차트의 시각적 호소를 향상시킵니다.

 var chartoptions = {
  플러그인 : {
    제목: {
      디스플레이 : True,
      위치 : "하단",
      텍스트 : "다른 계절의 철새"
    },
    전설: {
      정렬 : "센터",
      위치 : "왼쪽",
      라벨 : {
        글꼴 : {
          크기 : 16
        }
      }
    }
  },
  애니메이션 : {
    Aimaterotate : False
  },
  스케일 : {
    R : {
      진드기 : {
        글꼴 : {
          크기 : 16
        },
        색상 : "흰색",
        배경 콜러 : "검은 색"
      }
    }
  },
  요소 : {
    아크 : {
      각도 : 180,
      Bordercolor : "Black"
    }
  }
};

애니메이션 제어를 넘어서, 우리는 전설을 왼쪽으로 재배치하여 차트 가독성을 향상 시켰습니다.

결론

이 튜토리얼은 레이더 및 극지 지역 차트의 실제 응용 프로그램과 Chart.js의 구성 옵션을 사용하여이를 작성하고 사용자 정의하는 방법을 보여주었습니다. 향후 튜토리얼은 파이, 도넛 및 버블 차트를 다룹니다. 추가 JavaScript 리소스 및 프레임 워크를 위해 Envato Market을 탐색하십시오.

위 내용은 Chart.js : Radar 및 Polar Area 차트를 시작합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!