Chart.js : 소개 시작

텍스트 나 테이블로 표시되는 원시 데이터는 소화하기 어려울 수 있습니다. Chart.js는 데이터를 시각화하여 설득력있는 솔루션을 제공하여 복잡한 정보를보다 쉽게 ​​이해할 수 있습니다.

세계에서 가장 인구가 많은 국가를 보여주는이 표를 고려하십시오.

Chart.js를 사용하려면 설치로 시작하십시오.

 npm install chart.js -save

Chart.js는 이전에 Moment.js를 번들로 만들었지 만 더 이상 그렇지 않습니다. 시간 규모 차트의 경우 날짜 어댑터 (예 : Date-FNS)와 해당 라이브러리가 필요합니다. Date-FNS는 간단한 응용 프로그램을위한 가벼운 옵션입니다. 이 예제는 Date-FNS를 사용하고 Legend의 글꼴을 사용자 정의합니다.

 var barchart = 새로운 차트 (Popcanvas, {
    유형 : '바',
    데이터 : 데이터,
    옵션 : {
        플러그인 : {
          전설: {
            디스플레이 : True,
            위치 : "하단",
            라벨 : {
              Boxwidth : 50,
              색상 : "검은 색",
              글꼴 : {
                크기 : 24,
                체중 : "대담한"
              }
            }
          }
        }
    }
}); 

Chart.js를 사용하면 툴팁을 세분화 할 수 있습니다. Chart.defaults.plugins.tooltip 세트 글로벌 툴팁 스타일을 설정하고 개별 차트 옵션은 추가 사용자 정의를 제공합니다. 이 예제는 글꼴, 패딩, 화살표 크기 및 배경 사용자 정의를 보여줍니다.

 옵션 : {
    플러그인 : {
      전설: {
        디스플레이 : True,
        위치 : "하단",
        라벨 : {
          Boxwidth : 50,
          색상 : "검은 색",
          글꼴 : {
            크기 : 24,
            체중 : "대담한"
          }
        }
      },
      툴팁 : {
        Cornerradius : 0,
        간병 : 0,
        패딩 : 10,
        BackgroundColor : 'Black',
        BorderColor : "회색",
        Borderwidth : 5,
        Titlemarginbottom : 4,
        TitleFont : {
          "무게": "Bold",
          "크기": 22
        }
      }
    }
}

caretSize 설정은 0으로 0으로 툴팁 화살표를 숨 깁니다. 다음 데모는 이러한 맞춤형 툴팁을 보여줍니다.

결론:

Chart.js에 대한이 소개는 막대 차트 생성 및 사용자 정의를 보여주었습니다. 표시된 구성 옵션은 다양한 차트 유형에 적용됩니다. 향후 튜토리얼은 라인 및 막대 차트를 더 깊이 파고들 것입니다. Chart.js는 JavaScript 웹 개발 내에서 데이터 시각화를위한 강력한 도구입니다. (참고 : 인구 데이터 소스 인용).

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