AngularJS 및 D3.JS를 사용하여 차트 지침 생성

코어 포인트

d3.js는 AngularJS와 함께 사용하여 SVG (확장 가능한 벡터 그래픽)와 대화식 실시간 차트를 만들 수있는 JavaScript 라이브러리입니다. 이 조합을 통해 개발자는 동적 데이터 시각화로 풍부한 웹 응용 프로그램을 만들 수 있습니다.

angularjs 및 d3.js는 HTML 페이지로 설정하여 차트 지시문을 작성할 수 있습니다. 여기에는 AngularJS 컨트롤러 및 지침 작성 및 컨트롤러를 사용하여 차트에 그릴 데이터를 저장하는 것이 포함됩니다. 그런 다음이 지침을 사용하여 d3.js를 사용하여 라인 차트를 그릴 수 있습니다.

클릭은 실시간으로 업데이트하여 기본 데이터의 변경 사항을 반영 할 수 있습니다. 이는 명령어에서 컬렉션 관찰자를 사용하여 수집 데이터의 변경 사항을 모니터링 한 다음 변경이 감지 될 때 차트를 다시 그리기하여 수행 할 수 있습니다.
• d3.js는 다른 버전의 Angular 및 기타 JavaScript 프레임 워크와 함께 사용할 수 있습니다. AngularJS는 데이터 업데이트를 처리하는 데 사용할 수있는 강력한 데이터 바인딩 시스템을 제공하는 반면 AngularJS는 응용 프로그램을 구축하고 데이터 업데이트를 처리하기위한 구조화 된 방법을 제공합니다.
• D3은 HTML5 기술 확장 가능한 벡터 그래픽 (SVG)을 사용하여 대화식 차트를 만드는 데 사용할 수있는 JavaScript 라이브러리입니다. SVG에서 직접 차트를 작성하는 것은 SVG에서 지원하는 모양을 기억하고 API를 여러 번 호출하여 차트를 동적으로 만들어야하기 때문에 고통 스러울 수 있습니다. D3은 대부분의 통증을 제거하고 SVG 기반 차트를 구축하기위한 간단한 인터페이스를 제공합니다. Jay Raj는 D3을 사용하는 것에 대한 두 가지 좋은 itepoint 기사를 게시했습니다.
대부분의 여러분은 공식적으로 AngularJS를 도입 할 필요가 없습니다. AngularJS는 풍부한 웹 애플리케이션을 구축하기위한 클라이언트 측 JavaScript 프레임 워크입니다. AngularJS의 주요 장점 중 하나는 지침 지원입니다. 지시문은 자체 HTML 속성 및 요소를 정의하는 훌륭한 방법을 제공합니다. 또한 태그와 코드를 서로 분리하는 데 도움이됩니다.
• AngularJS는 또한 데이터 바인딩에서 매우 강력합니다. 이 기능은 모델의 데이터를 기반으로 UI를 업데이트하는 데 필요한 많은 시간과 노력을 절약합니다. 현대 온라인 세계에서 고객은 개발자에게 실시간 반응 형 웹 사이트를 구축하도록 요청합니다. 이는 고객이 항상 화면에서 최신 데이터를보고 싶어한다는 것을 의미합니다. 누군가가 백엔드에서 데이터를 수정 한 후에는 데이터 UI를 업데이트해야합니다. 데이터 바인딩을 지원하지 않으면 그러한 실시간 업데이트를 수행하는 것은 매우 어렵고 비효율적입니다.
이 기사에서는 D3 차트를 래핑하는 실시간 AngularJS 지시를 구축하는 방법을 배웁니다.
환경 환경

먼저, 우리는 환경을 설정해야합니다. HTML 페이지에 AngularJS와 D3을 포함해야합니다. 하나의 차트 지침 만 구축하므로 AngularJS 컨트롤러와 하나의 지침을 만들어야합니다. 컨트롤러에는 차트에 표시 될 데이터를 보유하는 컬렉션이 필요합니다. 다음 코드 스 니펫은 초기 컨트롤러 및 지침을 보여줍니다. 나중에이 구성 요소에 더 많은 코드를 추가 할 것입니다.

<code class="language-javascript">var app = angular.module("chartApp", []);

app.controller("SalesController", ["$scope", function($scope) {
  $scope.salesData = [
    {hour: 1,sales: 54},
    {hour: 2,sales: 66},
    {hour: 3,sales: 77},
    {hour: 4,sales: 70},
    {hour: 5,sales: 60},
    {hour: 6,sales: 63},
    {hour: 7,sales: 55},
    {hour: 8,sales: 47},
    {hour: 9,sales: 55},
    {hour: 10,sales: 30}
  ];
}]);

app.directive("linearChart", function($window) {
  return{
    restrict: "EA",
    template: "<svg height="200" width="850"></svg>",
    link: function(scope, elem, attrs){
    }
  };
});</code>

우리는 컨트롤러에 저장된 데이터를 사용하는 위의 지침에서 링크 함수를 채우고 D3을 사용하여 라인 차트를 그립니다. 지침의 템플릿에는 SVG 요소가 포함됩니다. 이 요소에 D3의 API를 적용하여 차트를 그릴 것입니다. 다음 코드 스 니펫은 지침의 예제를 보여줍니다.

이제 차트를 작성하는 데 필요한 기본 데이터를 수집합시다. 여기에는 그릴 데이터, SVG 요소의 JavaScript 객체 및 기타 정적 데이터가 포함됩니다.

<code class="language-html"><div linear-chart chart-data="salesData"></div></code>

D3 라이브러리를로드 한 후 D3 객체는 글로벌 변수로 사용할 수 있습니다. 그러나 코드 블록에서 직접 사용하면 해당 코드 블록을 테스트하기가 어렵습니다. 지침을 테스트 할 수 있도록 객체를 사용합니다.

간단한 선 차트를 그립니다 차트를 그리는 데 필요한 매개 변수를 설정하겠습니다. 차트에는 X 축, Y 축 및 이러한 축을 나타내는 데이터 필드가 필요합니다. 이 예에서 x 축은 시간의 시간을 나타냅니다. 배열에서 첫 번째 및 마지막 값을 취할 수 있습니다. y 축에서 가능한 값은 0에서 최대 판매 범위까지 다양합니다. 최대 판매는

<code class="language-javascript">var salesDataToPlot=scope[attrs.chartData];
var padding = 20;
var pathClass = "path";
var xScale, yScale, xAxisGen, yAxisGen, lineFun;

var d3 = $window.d3;
var rawSvg = elem.find("svg")[0];
var svg = d3.select(rawSvg);</code>

를 사용하여 찾을 수 있습니다. 축의 범위는 SVG 요소의 높이와 너비에 따라 다릅니다.

위의 값을 사용하여 D3가 원하는 방향과 스케일 수로 축을 그려야합니다. 마지막으로, 위에서 정의한 스케일을 기반으로 선을 그리기 위해 $window를 사용하여 함수를 정의해야합니다. 위의 모든 구성 요소는 지침 템플릿의 SVG 요소에 연결되어야합니다. 항목을 첨부 할 때 스타일과 변환을 차트에 적용 할 수 있습니다. 다음 코드는 매개 변수를 설정하고 SVG에 추가합니다.

차트의 실시간 업데이트

앞에서 언급 한 바와 같이, 오늘날의 네트워크의 기능을 통해 사용자는 기본 데이터가 변경 될 때 즉시 데이터 차트 업데이트를보고자합니다. WebSocket과 같은 기술을 사용하여 변경 사항을 클라이언트로 밀어 넣을 수 있습니다. 방금 만든 차트 지침은 이러한 변경 사항에 응답하고 차트를 업데이트 할 수 있어야합니다. WebSocket을 통해 데이터를 푸시하려면 Socket.io 및 Node.js, Signalr 및 .NET 또는 기타 플랫폼을 사용하여 구축 된 서버 구성 요소가 필요합니다. 이 데모에서는 AngularJS의 서비스를 사용하여 10 개의 임의의 판매 값을 1 초 지연으로 판매 배열로 밀어 넣습니다.

새 데이터가 푸시 된 직후 차트를 업데이트하려면 업데이트 된 데이터를 사용하여 차트를 다시 주도해야합니다. 컬렉션 옵저버는 수집 데이터의 변경 사항을 모니터링하기 위해 지침에 사용해야합니다. 컬렉션을 변경하면 관찰자가 호출됩니다. 차트는 관찰자에서 다시 그려집니다.

d3.max() 결론

AngularJS와 D3은 웹에서 풍부한 비즈니스 애플리케이션을 구축하는 데 매우 유용한 라이브러리입니다. 간단한 차트를 만들기 위해 함께 사용하는 방법에 대해 논의했습니다. 이 지식을 확장하여 응용 프로그램의 차트를 만들 수 있습니다. d3.svg.line()

(공간 제한으로 인해 FAQ 부품은 여기서 생략됩니다. FAQ 부품의 내용은 원래 텍스트와 일치하며 다시 쓰기를 필요로하지 않습니다.)

위 내용은 AngularJS 및 D3.JS를 사용하여 차트 지침 생성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!