CanvasJS와 DataTable 통합

CanvasJS는 대화형 및 반응형 차트를 만들 수 있는 JavaScript 차트 라이브러리이고, DataTables는 페이지 매김, 필터링, 정렬과 같은 고급 상호 작용 컨트롤을 통해 HTML 테이블을 향상시키는 jQuery 플러그인입니다. 대시보드에 이 두 도구를 결합하면 실시간 데이터 시각화가 가능해지며, 테이블 데이터를 기반으로 동적으로 업데이트되는 시각적으로 매력적인 대화형 차트를 통해 데이터 추세와 패턴을 더 쉽게 분석하고 해석할 수 있습니다.

이 튜토리얼에서는 CanvasJS를 DataTables와 통합하여 테이블의 데이터를 기반으로 업데이트되는 동적 원형 차트를 만드는 과정을 살펴보겠습니다. 이 예에서는 간단한 HTML 구조와 JavaScript 코드를 사용하여 통합을 보여줍니다.

전제 조건

시작하기 전에 다음 사항을 확인하세요.

• HTML, CSS, JavaScript에 대한 기본 지식
• 프로젝트에 포함된 CanvasJS 및 DataTables 라이브러리.

1단계: HTML 설정

먼저 차트용 컨테이너와 데이터용 테이블이 포함된 HTML 파일을 만듭니다.

<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<table id="example" class="display" style="width:100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
    </tr>
    <tr>
      <td>Garrett Winters</td>
      <td>Accountant</td>
    </tr>
    <!-- Add more rows as needed -->
  </tbody>
</table>

2단계: JavaScript 파일 생성

script.js 파일을 생성하고 다음 코드를 추가하여 DataTable 및 CanvasJS 차트를 초기화합니다.

// Create DataTable
var table = new DataTable('#dataTable');

// Create chart
var chart = new CanvasJS.Chart('chartContainer', {
        animationEnabled: true,
    theme: "light2",
    title: {
        text: 'Staff Count Per Position'
    },
    data: [
        {
            type: "pie",
          dataPoints: chartData(table)
        }
    ]
});
chart.render();

// On each draw, update the data in the chart
table.on('draw', function () {
    chart.options.data[0].dataPoints = chartData(table);
    chart.render();
});

function chartData(table) {
    var counts = {};

    // Count the number of entries for each position
    table
        .column(1, { search: 'applied' })
        .data()
        .each(function (val) {
            if (counts[val]) {
                counts[val] += 1;
            }
            else {
                counts[val] = 1;
            }
        });

    return Object.entries(counts).map((e) => ({
        label: e[0],
        y: e[1]
    }));
}

• HTML 구조: HTML 파일에는 차트용 컨테이너(chartContainer)와 샘플 데이터가 있는 테이블(예제)이 포함되어 있습니다.
• DataTable 초기화: DataTable은 DataTable 생성자를 사용하여 초기화됩니다.
• CanvasJS 차트 초기화: 차트 유형(원형) 및 데이터 포인트를 포함하여 지정된 옵션을 사용하여 새로운 CanvasJS 차트가 생성됩니다.
• 동적 데이터 업데이트: DataTable의 그리기 이벤트는 테이블을 다시 그릴 때마다 차트 데이터 포인트를 업데이트하는 데 사용됩니다. ChartData 함수는 각 위치의 항목 수를 계산하고 그에 따라 차트를 업데이트합니다.

3단계: 테스트 및 디버그

• 웹 브라우저에서 HTML 파일 열기: 차트와 표가 올바르게 표시되는지 확인하세요.
• 오류 확인: 브라우저의 개발자 콘솔을 열어 JavaScript 오류가 있는지 확인하세요.
• 동적 업데이트 확인: 표에서 행을 추가하거나 제거하고 그에 따라 차트가 업데이트되는지 확인하세요.

jsfiddle.net

이 단계를 수행하면 CanvasJS를 DataTables와 성공적으로 통합하여 테이블의 데이터를 기반으로 업데이트되는 동적 원형 차트를 만들 수 있습니다. 이러한 통합을 통해 데이터를 실시간으로 시각화할 수 있으므로 DataTable에 표시된 정보를 더 쉽게 분석하고 이해할 수 있습니다. 특정 사용 사례에 맞게 차트와 표를 자유롭게 맞춤설정하세요. 즐거운 코딩하세요!

위 내용은 CanvasJS와 DataTable 통합의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!