원격 데이터를 바인딩하고 JavaScript 데이터 투시표에서 가상 스크롤 사용 방법

SyncfusionJavaScript Pivot Table은 비즈니스 데이터를 구성하고 요약하며 교차 테이블 형식으로 결과를 표시하는 강력한 컨트롤입니다.데이터 바인딩, 위아래 드릴링, Excel과 유사한 필터링 및 정렬, 편집, Excel 및 PDF 내보내기, 내장 집선, 원근 테이블 필드 목록 및 계산 필드가 포함됩니다.행과 열 가상화를 사용하면 성능을 떨어뜨리지 않고 대량의 pivot 데이터를 불러올 수 있습니다.
로컬 또는 원격 데이터 바인딩 옵션을 통해 입력 데이터를 적용합니다.

로컬 데이터 귀속: 성명된 변수나 입력한 데이터를 저장하는 로컬 파일 귀속 데이터입니다.

원격 데이터 바인딩: 서비스 URL을 통해 데이터를 바인딩하거나 원격 서버에서 동적으로 파일을 다운로드하여 입력 데이터를 가져옵니다.

원격 데이터 바인딩의 경우 수신된 데이터는 다음 형식 중 하나여야 합니다.

JSON(JavaScript 객체 표현)

CSV(쉼표로 구분된 값)

이 블로그에서는 JavaScript Pivot 테이블 컨트롤에 사용되는 원격 데이터 바인딩을 자세히 살펴보고 입력 데이터를 가져오며 가상 스크롤을 활성화하여 성능을 향상시키는 프로세스를 검토합니다.
우리 시작합시다!

원격 데이터 바인딩

원격 서비스 URL에 연결

서비스의 끝점 URL을 데이터 SourceSettings의 URL 속성에 분배함으로써 입력한 데이터를 되돌려주는 원격 서비스와 Pivot표를 연결할 수 있습니다.또한 사용자는 수신된 데이터의 유형을 언급해야 하며 CSV나 JSON이어야 한다.
아래의 코드 예시가 이 점을 설명하였다.

let pivotObj: PivotView = new PivotView({
   dataSourceSettings: {
      url: 'https://bi.syncfusion.com/productservice/api/sales',
      type: 'CSV',
      rows: [{ name: 'Country' }],
      columns: [{ name: 'Sales Channel' }],
      values: [{ name: 'Total Cost' }]
   }
});

위의 코드 예제에서 Pivot 테이블을 입력한 데이터를 CSV 형식으로 반환하는 온라인 서비스에 연결합니다.이와 유사하게 아래 코드와 같이 localhost URL을 제공하여 로컬 서비스에 연결할 수 있습니다.

let pivotObj: PivotView = new PivotView({
  dataSourceSettings: {
     url: 'https://localhost:5001/productservice/api/sales',
     type: 'CSV',
     rows: [{ name: 'Country' }],
     columns: [{ name: 'Sales Channel' }],
     values: [{ name: 'Total Cost' }]
   }
});

다운로드 가능한 URL에 입력 데이터 연결

앞에서 설명한 대로 Pivot 테이블을 서비스 URL에서 다운로드 가능한 파일(*.json 또는 *.csv)에 연결할 수 있습니다.이를 위해 다운로드 가능한 파일 URL을 데이터SourceSettings의 URL 속성에 지정하십시오.
아래의 코드 예시가 이 점을 설명하였다.

let pivotObj: PivotView = new PivotView({
  dataSourceSettings: {
     url: 'https://cdn.syncfusion.com/data/sales-analysis.json',
     type: 'JSON', //In this enum, "JSON" is default value. So, no need to mention.
     rows: [{ name: 'EnerType', caption: 'Energy Type' }],
     columns: [{ name: 'EneSource', caption: 'Energy Source' }],
     values: [{ name: 'ProCost', caption: 'Cost (MM)' }],
   }
});

주: 원격 서버와 통신하고 입력 데이터를 얻기 위해 핵심 라이브러리에 있는 미리 정의된 어댑터를 사용했습니다. 이 어댑터는 내부에서 필요한 모든 작업을 수행합니다.피벗 워크스테이션에서 지원되는 어댑터는 다음과 같습니다.

ODAta 서비스

ODATA V4 서비스

네트워크 API

자세한 내용은 adaptors in JavaScript DataManager control documentation를 참조하십시오.

가상 스크롤

가상 스크롤은 JavaScript 원근 테이블의 중요한 기능입니다.그것은 성능 지연 없이 대량의 데이터를 쉽게 볼 수 있도록 도와준다.이것은 현재 내용 뷰포트의 집합 데이터만 제공하고 나머지 데이터는 스크롤할 때 동적으로 뷰포트로 가져옵니다.enable Virtualization 속성을true로 설정하여 가상 스크롤 기능을 사용할 수 있습니다.
아래의 코드 예시가 이 점을 설명하였다.

let pivotObj: PivotView = new PivotView({
  dataSourceSettings: {
     url: 'https://bi.syncfusion.com/productservice/api/sales',
     type: 'CSV'
     rows: [{ name: 'Country' }],
     columns: [{ name: 'Sales Channel' }],
     values: [{ name: 'Total Cost' }]
   }
   enableVirtualization: true
});

참고: 이 블로그에 언급된 모든 원격 데이터 소스 유형은 가상 스크롤을 지원합니다.

데이터 압축

이것은 가상 스크롤의 중요한 부가 구성 요소로 그 성능을 더욱 향상시킬 것이다.여기서 모든 원시 데이터는 그 유일성에 따라 압축되고 압축된 데이터는 데이터 투시표의 입력으로 제공된다.압축 (유일한) 데이터는 수시로 진일보한 조작에 사용될 것이다.이는 교체 횟수를 줄여 투시표의 성능을 높일 것이다.
예를 들어 pivot표가 100만 개의 원시 데이터 기록에 연결된 다음에 이 기록을 1000개의 유일한 기록으로 집합하면 집합된 데이터를 사용하여 컨트롤을 더욱 빨리 나타낼 수 있다.이 옵션을 사용하려면 allowDataCompression 속성과 enableVirtualization 속성을true로 설정할 수 있습니다.
아래의 코드 예시가 이 점을 설명하였다.

let pivotObj: PivotView = new PivotView({
  dataSourceSettings: {
     url: 'https://bi.syncfusion.com/productservice/api/sales',
     type: 'CSV'
     rows: [{ name: 'Country' }],
     columns: [{ name: 'Sales Channel' }],
     values: [{ name: 'Total Cost' }]
   }
   enableVirtualization: true,
   allowDataCompression: true
});

자세한 내용은 data compression in the virtual scrolling in JavaScript Pivot table documentation를 참조하십시오.
JavaScript 데이터 투시표의 가상 스크롤

원격 데이터 원본에 가상 스크롤을 사용하는 한계

앞에서 말한 바와 같이 가상 스크롤의 목적은 대량의 데이터를 더욱 빨리 나타내는 것이다.그러나 원격 데이터 원본을 귀속할 때 서버가 대량의 입력 데이터를 되돌려주면 사용자는 성능이 정체될 것이다.이것은 브라우저에 모든 입력 데이터의 다운로드 시간을 불러와서 집합 데이터를 생성하고 진일보한 처리를 하기 때문이다.
참고: 지연은 입력 데이터 크기, 네트워크 속도 및 브라우저에 따라 달라집니다.
이 제한을 극복하려면 다음 옵션 중 하나를 사용해야 합니다.

CSV 형식

서버측 엔진

CSV 형식

CSV는 JSON에 비해 가장 빈틈없는 형식입니다.JSON의 절반 크기이기 때문에 브라우저에 데이터를 전송할 때 사용 대역폭을 줄이는 데 도움이 된다.
자세한 내용은 binding pivot table to remote CSV data documentation를 참조하십시오.

서버측 엔진

서버 사이드 엔진을 도입하면 모든 데이터 투시 계산, 필터, 정렬 및 기타 작업이 서버에서 완료됩니다.그리고 클라이언트에 표시할 정보만 전달합니다.이것은 전체 데이터 원본을 브라우저로 전송하는 것을 방지하여 네트워크 데이터를 줄이고 투시표의 렌더링 성능을 향상시킬 것이다.
서버측 엔진은 다음 NuGet 패키지에서 다운로드할 수 있습니다https://www.nuget.org/packages/Syncfusion.EJ2.Pivot/.
또한 다음 GitHub 저장소에는 서버측 엔진을 사용하는 예가 있습니다https://github.com/SyncfusionExamples/server-side-pivot-engine-for-pivot-table.

결론

이 블로그에서 우리는 SyncfusionJavaScript Pivot Table에서 원격 데이터를 연결하고 가상 스크롤을 사용하는 과정을 배웠고 이러한 기능의 코드 예시를 보았다.가상 스크롤을 사용하면 우리는 불러오는 시간과 대역폭을 최적화하여 웹 서비스에서 데이터를 얻는 동시에 데이터 투시표의 성능을 향상시킬 수 있다.그러므로 본고가 제공한 방법을 시험해 보고 아래의 평론 부분에 피드백을 남겨라.
우리의 데이터 투시표도 우리의 Blazor ASP에 있을 수 있다.순Core, MVC, Angular, React 및 Vue 구성 요소 키트.그것들을 사용하여 우아하게 업무 데이터를 조직하고 총결산하라!
기존 고객의 경우 License and Downloads 페이지에서 최신 버전의 JavaScript 컨트롤 팩을 다운로드할 수 있습니다.Syncfusion 고객이 아닌 경우 사용 가능한 기능을 30일free trial 동안 검토해 보십시오.이외에 당신도 이 GitHub 장소에서 우리의 샘플을 시험적으로 사용할 수 있습니다.
저희support forums, Direct-Trac 또는 feedback portal를 통해서도 저희에게 연락하실 수 있습니다.우리는 언제든지 기꺼이 당신을 돕겠습니다!
만약 당신이 이 박문을 좋아한다면, 우리는 당신도 다음과 같은 내용을 좋아할 것이라고 생각합니다.

[블로그]

[블로그]

[블로그]

JavaScript Succinctly [전자책]

도구책

[블로그]

Data Binding Documentation

Virtual Scrolling Documentation