Chart.js 차트 라이브러리를 사용하여 아름다운 반응형 양식 만들기_javascript 팁

참가 기본 사항

Chart.js는 HTML5 기반의 오픈소스 차트 라이브러리로, 아름다운 차트를 편리하고 간결하게 그릴 수 있습니다.

주요 기능은 다음과 같습니다.

1. 곡선 차트, 막대 차트, 원형 차트, 방사형 차트, 극좌표 영역 차트, 링 차트 등 6가지 테이블 유형을 지원합니다.
2. HTML5를 기반으로 개발되었으며 모든 브라우저(IE7/8 포함)를 지원합니다.
3. 다른 라이브러리에 의존하지 않고 크기가 4.5k에 불과하며 사용자 정의가 가능합니다.

Chart.js는 HTML5 캔버스를 기반으로 하는 반응성이 뛰어나고 유연하며 가벼운 차트 라이브러리입니다. 라이브러리에는 다양한 사용자 정의 옵션이 포함된 6가지 차트 유형이 있습니다. 충분하지 않다면 자신만의 차트 유형을 만들 수도 있습니다.

Chart.js의 6가지 차트 유형에 대한 코드는 총 11kb에 불과하며 gzip으로 압축되어 있습니다. 또한 라이브러리는 모듈식이므로 필요한 차트 유형만 사용할 수 있으므로 공간이 더욱 절약됩니다. 아래는 라이브러리가 포함된 cdnjs 링크입니다.

자바스크립트

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>

사용 가능한 설정

툴팁부터 애니메이션 효과까지(교정자 노트: 툴팁은 요소 위로 마우스를 이동할 때 나타나는 툴팁을 말합니다) Chart.js를 사용하면 차트의 거의 모든 특성을 변경할 수 있습니다. 이 섹션에서는 Chart.js가 생성되는 방법을 보여주기 위해 일부 설정을 수정하겠습니다. 다음 HTML 코드부터 시작하겠습니다.

XHTML

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

첫 번째 프레젠테이션에서는 꺾은선형 차트를 만들어 보겠습니다. 차트를 이해하기 위해서는 몇 가지 기본 옵션을 설정해야 합니다. 꺾은선형 차트에는 일련의 라벨과 데이터세트가 필요합니다. 레이블은 X축에 표시됩니다. 나는 꺾은선형 차트의 일부 데이터를 배열로 분리하고 각각 고유한 채우기 색상, 선 및 점 세트를 사용하여 모형화했습니다.

이 예에서는 fillColor를 투명으로 설정했습니다. fillColor 값을 설정하지 않으면 기본값은 검정색 또는 회색입니다. 다른 값에도 동일하게 적용됩니다. 색상은 CSS와 마찬가지로 RGBA, RGB, 16진수 또는 HSL 형식을 사용하여 정의됩니다.

자바스크립트

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

전역 옵션 설정

코드에서 일부 전역 값을 설정했습니다. animationSteps는 애니메이션의 지속 시간을 결정합니다. 필요에 따라 scaleLineColor 및 scaleIntegersOnly와 같은 추가 옵션을 수정할 수 있습니다. 라이브러리에서 사용할 수 있는 다른 옵션이 무엇인지 알아보려면 Chart.js 문서를 탐색하는 것이 좋습니다.

자바스크립트

Chart.defaults.global = {
 animationSteps : 50,
 tooltipYPadding : 16,
 tooltipCornerRadius : 0,
 tooltipTitleFontStyle : 'normal',
 tooltipFillColor : 'rgba(0,160,0,0.8)',
 animationEasing : 'easeOutBounce',
 scaleLineColor : 'black',
 scaleFontSize : 16
}

독점 차트 옵션 설정

글로벌 옵션 외에도 특정 차트 유형에 대한 몇 가지 구성 옵션이 있습니다. 이 꺾은선형 차트에서는 여러분에게 영감을 주기 위해 다음과 같은 옵션을 설정하겠습니다.

자바스크립트

Chart.defaults.global = {
animationSteps : 50,
tooltipYPadding : 16,
tooltipCornerRadius : 0,
tooltipTitleFontStyle : 'normal',
tooltipFillColor : 'rgba(0,160,0,0.8)',
animationEasing : 'easeOutBounce',
scaleLineColor : 'black',
scaleFontSize : 16
}

Chart.js로 생성된 차트는 기본적으로 응답하지 않습니다. 반응형을 true로 설정하면 반응형 차트로 전환됩니다. 모든 차트를 반응형으로 만들어야 한다면 다음과 같이 전역 값을 설정하는 것이 좋습니다.

자바스크립트

Chart.defaults.global.responsive = true;

아래에서 이 선형 차트의 예를 볼 수 있습니다.

See the Pen Chart.js Responsive Line Chart Demo by SitePoint (@SitePoint) on CodePen.

동적 데이터 추가 및 제거

항상 변경되는 데이터를 표시해야 하는 경우가 있습니다. 주식 시장은 이 애플리케이션 시나리오의 전형적인 예입니다. 이번 섹션에서는 세로 막대형 차트를 생성하고 데이터를 동적으로 삭제하면서 데이터를 추가해 보겠습니다. 이 예에서는 임의의 데이터를 사용하여 데이터를 세로 막대형 차트로 표시하겠습니다. 이 예제의 코드는 대부분 이전 예제와 유사합니다. HTML(이전 예와 동일)이 있으면 자체 JavaScript를 추가할 수 있습니다.

먼저 차트를 동적 데이터로 채우는 코드를 작성해야 합니다. 함수 표현식을 사용하여 임의의 값을 생성한 다음 이를 변수 dData에 할당합니다. 이 값은 변경해야 할 때 임의의 데이터를 제공합니다. 이전 예와 마찬가지로 레이블 배열과 데이터 세트를 만들고 임의의 fillColor를 설정했습니다.

자바스크립트

var dData = function() {
 return Math.round(Math.random() * 90) + 10;
};
var barData = {
 labels: ['dD 1', 'dD 2', 'dD 3', 'dD 4',
      'dD 5', 'dD 6', 'dD 7', 'dD 8'],
 datasets: [{
  fillColor: 'rgba(0,60,100,1)',
  strokeColor: 'black',
  data: [dData(), dData(), dData(), dData(),
      dData(), dData(), dData(), dData()]
 }]
}

이제 차트에서 막대를 제거하고 추가하는 코드를 작성할 차례입니다. 처음에는 인덱스 값을 11로 초기화했고, RemoveData()와 addData(valuesArray,label)라는 두 가지 메서드를 사용했습니다. 인스턴스의 RemoveData() 메서드를 호출하면 차트의 모든 데이터 세트에서 첫 번째 값이 제거됩니다. barChartDemo 예에서는 데이터 세트의 첫 번째 값이 제거됩니다. addData()를 호출하면 레이블과 함께 배열 값이 전달되고 차트 끝에 새 데이터 노드가 추가됩니다. 아래 코드 조각은 3초마다 차트를 업데이트합니다.

자바스크립트

var index = 11;
var ctx = document.getElementById('canvas').getContext('2d');
var barDemo = new Chart(ctx).Bar(barData, {
 responsive: true
});
setInterval(function() {
 barDemo.removeData();
 barDemo.addData([dData()], 'dD ' + index);
 index++;
}, 3000);

차트 값을 업데이트하는 또 다른 방법은 값을 직접 설정하는 것입니다. 아래 예에서 첫 번째 줄은 첫 번째 데이터 세트의 두 번째 막대 값을 60으로 설정합니다. 이 시점에서 업데이트하면 막대가 현재 값을 60으로 애니메이션화합니다.

자바스크립트

barDemo.datasets[0].bars[2].value = 60;
barDemo.update();

这里是柱形图的示例（由SitePoint在CodePen上创建）：

See the Pen Chart.js Responsive Bar Chart Demo by SitePoint (@SitePoint) on CodePen.

结论

这个教程覆盖了关于 Chart.js 的一些重要功能。第一个例子展示了一些全局设置的使用，同时，Chart.js也为每个图表类型提供了专属的自定义设置。如果当前可用的图表无法满足你的需求，你还可以创造自己的图表类型。我推荐你浏览文档，加深关于该库什么可以做，什么无法做的认识。