angularjs를 사용하여 차트 생성
또한 Angular와 잘 어울릴 수 있는 차트 작성 솔루션도 찾고 있습니다.JS 디렉티브몇 가지 우연히 만났는데 정말 헷갈렸어요.Angular와 통합된 대화형 차트를 만드는 방법에 대해 제안할 사람이 있습니까?JS 모듈?
각도 차트는 각도 및 D3 도표를 만들기 위해 작성한 라이브러리입니다.
D3를 사용하여 생성할 수 있는 기본 차트를 하나의 각도 지시어로 캡슐화합니다.또한 다음과 같은 기능도 제공합니다.
- 클릭 한 번으로 차트 변경
- 자동 툴팁
- 컨테이너에 대한 자동 조정;
- 범례
- 심플한 데이터 형식: x와 y에 필요한 것만 정의합니다.
각도 차트 데모를 사용할 수 있습니다.
멋진 Angular를 봤어하이차트를 활용한 JS 차트 작성 솔루션.GitHub에는 Angular를 만들기 위한 highcharts-ng 지침이 있습니다.JS 통합이 더 쉬워지고 JSFiddle의 몇 가지 예를 통해 가능한 것을 쉽게 확인할 수 있습니다.
차트를 JS 측에 다음과 같이 설정합니다.
$scope.chart = {
options: {
chart: {
type: 'bar'
}
},
series: [{
data: [10, 15, 12, 8, 7]
}],
title: {
text: 'Hello'
},
loading: false
}
그리고 HTML에서 다음과 같이 참조합니다.
<highchart id="chart1" config="chart"></highchart>
사용/라이센스 경고:하이차트는 Creative Commons 라이선스에 따라 비상업적인 용도로 무료로 이용할 수 있습니다.영리/상업 시나리오에서 차트 작성 옵션을 찾고 있다면 제품을 구입하거나 다른 곳을 찾아야 합니다.
ZingChart 라이브러리에는 Angular가 있습니다.사내에 내장된 JS 디렉티브.특징은 다음과 같습니다.
- 전체 ZingChart 라이브러리(모든 차트, 지도 및 기능)에 대한 풀 액세스
- Angular의 2방향 데이터 바인딩을 활용하여 데이터 및 차트 요소를 쉽게 업데이트할 수 있습니다.
개발팀 지원
... $scope.myJson = { type : 'line', series : [ { values : [54,23,34,23,43] },{ values : [10,15,16,20,40] } ] }; ... <zingchart id="myChart" zc-json="myJson" zc-height=500 zc-width=600></zingchart>
D3.js는 해봤어?여기 좋은 예가 있다.
xCharts의 각도 지시문을 작성했습니다.이것은 멋진 js 차트 라이브러리 http://tenxer.github.io/xcharts/ 입니다.bower를 사용하여 설치할 수 있습니다.https://github.com/radu-cigmaian/ng-xCharts
하이차트도 하나의 해결책이지만 상업적인 용도로는 무료가 아니다.
더 유용한 리소스를 수집하려면 여기를 클릭하십시오.
앞에서 설명한 바와 같이 D3.js는 차트를 위한 최고의 시각화 라이브러리입니다.Angular에서 사용하려면JSI는 각도 차트를 개발했습니다.D3.js를 AngularJS 2-Way-DataBinding과 연결하는 명령어 사용은 간단합니다.이렇게 하면 구성 옵션을 변경할 때마다 차트가 자동으로 업데이트되고 동시에 차트가 Angular에서 사용할 수 있도록 상태(확대/축소 수준 등)를 저장합니다.JS월드
예시를 보고 납득하십시오.
AngularJS 차트 작성 플러그인과 FusionCharts 라이브러리를 함께 사용하면 하나의 지시문으로 웹/모바일 애플리케이션에 대화형 JavaScript 그래프 및 차트를 추가할 수 있습니다.링크: http://www.fusioncharts.com/angularjs-charts/ #/http/ex1
언급URL : https://stackoverflow.com/questions/19418969/creating-charts-with-angularjs
'source' 카테고리의 다른 글
| ASP.NET Core API POST 파라미터는 항상 null입니다. (0) | 2023.03.28 |
|---|---|
| Angular에서 배열 내의 객체를 검색해야 합니다. (0) | 2023.03.28 |
| json을 변수에 로드하다 (0) | 2023.03.28 |
| Express에서 요청 본문을 json이 아닌 일반 텍스트로 강제 해석하려면 어떻게 해야 합니까? (0) | 2023.03.28 |
| JavaScript:JSONP를 작성하려면 어떻게 해야 하나요? (0) | 2023.03.28 |