Chart.js와 함께 멋진 반응 형 차트

데이터는 우리 주변에 있습니다. 검색 엔진 및 기타 애플리케이션은 텍스트 기반 데이터 표현에서 가장 최적으로 작동하지만 사람들은 시각적으로 표현 된 데이터를 이해하기 쉽다는 것을 알게됩니다. 올해 초 SitePoint는 Aurelio의 기사를 출판하여 Chart.js에 대한 소개를 발표했습니다. 이 튜토리얼은 해당 소개를 빠르게 요약 한 다음 Chart.js의 기능에 대한 자세한 내용을 제공합니다. 키 테이크 아웃

Chart.js는 HTML5 캔버스 기반 반응 형 가벼운 차트 라이브러리로 6 가지 차트 유형을 지원하며 각각 수많은 사용자 정의 옵션이 있습니다. 모듈 식으로 개발자가 필요한 차트 유형 만 포함하여 파일 크기를 최소화합니다. 라이브러리를 사용하면 도구 팁, 애니메이션 및 사용자 정의 차트 유형의 생성을 포함한 차트를 광범위하게 사용자 정의 할 수 있습니다. 여기에는 반응 형 구성 옵션을 true로 설정하여 차트를 반응 할 수있는 글로벌 설정 및 차트 별 옵션이 모두 포함됩니다. Chart.js는 또한 데이터의 동적 추가 및 제거를 지원하므로 주식 시장 표현과 같은 시간이 지남에 따라 데이터가 변경되는 상황에 이상적입니다. 이는 removeData () 및 addData (valueArray, 레이블)와 같은 메소드를 통해 또는 차트에서 값을 직접 설정하여 달성 할 수 있습니다.

시작하기

Chart.js는 HTML5 캔버스 기반 반응 형, 유연한 가벼운 차트 라이브러리입니다. 라이브러리는 6 가지 차트 유형을 지원하며 이러한 각 차트 유형에는 다양한 사용자 정의 옵션이 제공됩니다. 그것으로 충분하지 않다면, 당신은 또한 자신의 사용자 정의 차트 유형을 만들 수 있습니다.

. Chart.js의 6 가지 핵심 차트 유형은 모두 11kb에 불과하고 gzip'd이며 라이브러리는 모듈 식이므로 실제로 필요한 차트 유형을 포함하여 파일의 요청 크기를 더욱 줄일 수 있습니다. 아래는 cdnjs 링크를 포함시키기위한 링크입니다

사용 가능한 구성 옵션
• Chart.js를 사용하면 도구 팁에서 애니메이션에 이르기까지 차트의 거의 모든 측면을 변경할 수 있습니다. 이 섹션에서는 어떤 차트를 작성할 수 있는지 보여주기 위해 몇 가지 설정을 수정합니다. 다음은 다음과 같이 시작할 HTML입니다
첫 번째 데모의 경우 라인 차트를 만들 것입니다. 차트가 이해되기 위해 설정 해야하는 몇 가지 기본 옵션이 있습니다. 라인 차트는 다양한 레이블 및 데이터 세트를 기대합니다. 라벨은 x 축에 나타납니다. 더미 데이터로 라인 차트를 작성했습니다. 데이터는 다양한 데이터 세트로 나뉩니다. 각 데이터 세트에는 채우기, 라인 및 포인트에 대한 색상이 있습니다.
• 이 경우 FillColor를 투명하게 설정했습니다. FillColor 값을 설정하지 않으면 대신 검은 색 또는 회색으로 설정됩니다. 다른 값도 마찬가지입니다. 색상은 CSS와 유사한 RGBA, RGB, Hex 또는 HSL 형식을 사용하여 정의됩니다.

  <span><script></script></span>

  전역 옵션 설정 나는 전역 값을 설정하는 코드를 포함시켰다. AnimationSteps는 애니메이션 지속 시간을 결정합니다. ScalelineColor 및 ScaleIntegersonly와 같은 요구에 따라 수정할 수있는 더 많은 옵션이 있습니다. 이 라이브러리가 제공 해야하는 다른 내용을 확인하기 위해 Chart.js 문서를 살펴 보는 것이 좋습니다.

  차트 특정 옵션 설정

  전역 옵션 외에도 개별 차트 유형에 사용할 수있는 구성 옵션이 있습니다. 이 라인 차트 에서이 옵션 중 몇 가지를 설정하여 아이디어를 제공 할 것입니다 :
  Chart.js에 의해 생성 된 차트는 기본적으로 응답하지 않습니다. True (위의)에 반응을 설정하면 응답이 가능합니다. 모든 차트를 응답 해야하는 경우 다음과 같이 전 세계적으로 설정하는 것이 좋습니다.

  <span><canvas id="canvas"></canvas></span>

  아래 아래에서 라인 차트의 데모를 볼 수 있습니다. Codepen에서 sitepoint (@sitepoint)의 펜 차트 참조. 데이터 추가 및 제거 및 동적으로

  때때로 시간이 지남에 따라 변경되는 데이터를 표시해야합니다. 이 시나리오의 전형적인 예는 주식 시장입니다. 이 섹션에서는 막대 차트를 생성하고 동적으로 제거하고 데이터를 추가합니다. 나는 임의의 데이터를 사용 하고이 경우 막대 차트가있는 데이터를 대표하기로 결정했습니다. 이 예제의 대부분의 코드는 이전 예제와 유사합니다. HTML (이전 예와 동일)이 있으면 JavaScript를 추가 할 수 있습니다. 먼저 우리는 더미 데이터로 차트를 작성하기 위해 코드를 작성합니다. 함수 표현식을 사용하여 임의의 값을 생성 한 다음 변수 DData에 저장합니다. 그런 다음이 값은 필요할 때마다 임의의 데이터를 제공하는 데 사용됩니다. 이전 예에서와 같이, 나는 라벨과 데이터 세트 배열을 만들고 임의의 채우기를 설정합니다.

  이제 차트에 막대를 제거하고 추가하는 코드를 작성해야합니다. 나는 11의 값으로 인덱스 변수를 초기화하는 것으로 시작합니다. removedata ()와 addData (valesArray, label)의 두 가지 메소드를 사용하고 있습니다. 차트 인스턴스에서 removeData () 호출은 해당 특정 차트의 모든 데이터 세트의 첫 번째 값을 제거합니다. Barchartdemo의 경우 데이터 세트의 첫 번째 값이 제거됩니다. AddData () 호출 라벨과 함께 값 배열을 전달하면 차트 끝에 새 데이터 포인트가 추가됩니다. 아래 코드 스 니펫 아래 코드는 3 초마다 차트를 업데이트합니다.
  차트에서 값을 업데이트하는 대체 방법은 값을 직접 설정하는 것입니다. 아래의 예에서 첫 번째 줄은 첫 번째 데이터 세트의 두 번째 막대의 값을 60으로 설정합니다.이 시점에서 업데이트를 호출하면 막대는 현재 값에서 60으로 애니메이션됩니다.

  <span>var lineData = {
  </span>  <span>labels: ['Data 1', 'Data 2', 'Data 3', 'Data 4', 
  </span>           <span>'Data 5', 'Data 6', 'Data 7'],
  </span>  <span>datasets: [{
  </span>    <span>fillColor: 'rgba(0,0,0,0)',
  </span>    <span>strokeColor: 'rgba(220,180,0,1)',
  </span>    <span>pointColor: 'rgba(220,180,0,1)',
  </span>    <span>data: [20, 30, 80, 20, 40, 10, 60]
  </span>  <span>}, {
  </span>    <span>fillColor: 'rgba(0,0,0,0)',
  </span>    <span>strokeColor: 'rgba(151,187,205,1)',
  </span>    <span>pointColor: 'rgba(151,187,205,1)',
  </span>    <span>data: [60, 10, 40, 30, 80, 30, 20]
  </span>  <span>}]
  </span><span>}</span>

  .

  그리고 여기에는 막대 차트 데모가 있습니다 : Codepen에서 SitePoint (@SitePoint)의 Respondive Bar Chart Demo를 참조하십시오.

  결론 이 자습서는 Chart.js의 몇 가지 중요한 기능을 다루었습니다. 첫 번째 예는 몇 가지 글로벌 설정을 사용하는 것을 보여주었습니다. 그러나 Chart.js는 차트 유형에 맞는 사용자 정의 옵션도 제공합니다. 도서관을 사용하면 이미 사용 가능한 차트가 요구 사항을 충족하지 않으면 나만의 차트 유형을 만들 수 있습니다. 이 라이브러리로 할 수 있고 할 수없는 일을 잘 이해할 수 있도록 문서를 살펴 보는 것이 좋습니다.

  차트가있는 멋진 반응 형 차트에 대한 자주 묻는 질문 (FAQ) 내 차트를 완전히 반응하는 방법은 무엇입니까?

  차트를 완전히 반응하는 경우 반응 형 구성 옵션을 true로 설정하는 것이 포함됩니다. 이를 통해 창 크기가 변경 될 때 차트가 크기를 조정할 수 있습니다. 차트 구성에 다음 코드를 추가하여이를 수행 할 수 있습니다. var mychart = new Chart (ctx, {

  유형 : 'bar', data : data, respondive : true } 이 코드는 창 크기가 변경 될 때마다 차트가 크기를 조정하여 완전히 반응 형을 보장합니다. Design.
  내 Chart.js 차트가 올바르게 크기를 조정하지 않는 이유는 무엇입니까?
  Chart.js 차트가 올바르게 크기를 조정하지 않으면 몇 가지 이유 때문일 수 있습니다. 일반적인 문제 중 하나는 차트를 포함하는 캔버스 요소가 올바르게 크기를 조정하지 않는다는 것입니다. 캔버스 요소의 상대 위치와 너비와 높이가 100%인지 확인하십시오. 또 다른 문제는 차트 구성의 반응 형 옵션이 True로 설정되지 않는다는 것입니다. 반응 형 옵션이 올바르게 설정되어 있는지 확인하여 차트 구성을 확인하십시오.

  내 차트의 모양을 사용자 정의 할 수 있습니까? 차트의 모양. 색상, 레이블, 툴팁 등을 사용자 정의 할 수 있습니다. 예를 들어, 막대 차트에서 막대의 색상을 사용자 정의하려면 다음 코드를 사용할 수 있습니다. var mychart = new Chart (ctx, {

  유형 : 'bar', data. : {

  데이터 세트 : [{ BackgroundColor : 'rgba (75, 192, 192, 0.2)'
  }]
  } });
  이 코드는 막대의 배경색을 밝은 파란색으로 설정합니다. 비슷한 옵션을 사용하여 차트 모양의 다른 많은 측면을 사용자 정의 할 수 있습니다.
  차트에 툴팁을 추가하려면 차트에 툴팁을 추가 할 수 있습니까? 툴팁 구성 옵션을 사용하여 툴팁의 모양 및 동작을 사용자 정의 할 수 있습니다. 예를 들어, 툴팁의 배경색을 변경하려면 다음 코드를 사용할 수 있습니다. var mychart = new Chart (ctx, {

  type : 'bar', data : data,

  옵션 : { 툴팁 : { BekgroundColor : 'rgba (0, 0, 0, 0.8)'

  }
  } });
  이 코드는 툴팁의 배경색을 반 트랜스 펜트 블랙 컬러로 설정합니다. 비슷한 옵션을 사용하여 툴팁의 다른 많은 측면을 사용자 정의 할 수 있습니다.
  내 차트에 애니메이션을 추가하려면 어떻게해야합니까? . 애니메이션 구성 옵션을 사용하여 지속 시간, 완화 기능 및 기타 애니메이션 측면을 제어 할 수 있습니다. 예를 들어, 2000 밀리 초의 지속 시간과 'EaseOutbounce'의 완화 함수로 차트를 애니메이션하기 위해 다음 코드를 사용할 수 있습니다. var mychart = new Chart (ctx, {
  type : ' bar ', data : data, 옵션 : { 애니메이션 : { 지속 시간 : 2000, 완화 : 'EaseOutBounce'} });
  이 코드는 2 초 동안 튀는 효과로 차트를 애니메이션합니다. 비슷한 옵션을 사용하여 애니메이션의 다른 많은 측면을 사용자 정의 할 수 있습니다.
  

위 내용은 Chart.js와 함께 멋진 반응 형 차트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!