jQuery를 사용한 파이 차트
자바스크립트로 파이 차트를 만들고 싶습니다.검색해보니 구글 차트 API가 있었습니다.jQuery를 사용하고 있기 때문에 Google Charts에 대한 jQuery 통합을 사용할 수 있습니다.
하지만 여기서 제 문제는 실제 데이터가 차트를 만들기 위해 구글 서버로 전송된다는 것입니다.데이터가 구글로 전송되는 것을 막을 수 있는 방법이 있습니까?제 데이터를 제3자에게 보내는 것이 걱정됩니다.
플로트
한계: 선, 점, 채워진 영역, 막대, 파이 및 이들의 조합
수 합니다.jQuery그래프 출력이 매우 매끄럽고 보기 좋은 반면 데이터 포인트와 상호 작용할 수도 있습니다.즉, 데이터 포인트 위에 마우스를 올려놓고 그래프에서 해당 포인트의 값에 대한 시각적 피드백을 얻을 수 있습니다.
트렁크 버전의 플롯은 원형 차트를 지원합니다.
Flot Zoom(확대/축소) 기능.
또한 그래프의 청크를 선택하여 특정 "영역"에 대한 데이터를 다시 가져올 수도 있습니다.이 "구역 설정"의 보조 기능으로 그래프에서 영역을 선택하고 확대하여 데이터 지점을 좀 더 자세히 볼 수도 있습니다.아주 멋집니다.
스파크라인
제한 사항:파이, 선, 막대, 조합
스파크라인은 제가 가장 좋아하는 미니 촬영 도구입니다.대시보드 스타일 그래프에 매우 적합합니다(다음에 로그인할 때 Google Analytics 대시보드를 참조하십시오).너무 작기 때문에 위의 예와 같이 줄에 포함될 수 있습니다.모든 그래프 작성 플러그인에 사용할 수 있는 또 다른 좋은 아이디어는 자체 새로 고침 기능입니다.Mouse-Speed 데모는 라이브 차트 작성의 힘을 최고 수준으로 보여줍니다.
쿼리 차트 0.21
제한 사항:면적, 선, 막대 및 이들의 조합
jQuery Chart 0.21은 차트 작성 플러그인 중 가장 보기 좋은 플러그인이 아닙니다.처리할 수 있는 차트에 관한 한 기능은 매우 기본적이지만 시간과 노력을 들이면 유연할 수 있습니다.
차트에 값을 추가하는 것은 비교적 간단합니다.
.chartAdd({
"label" : "Leads",
"type" : "Line",
"color" : "#008800",
"values" : ["100","124","222","44","123","23","99"]
});
jQ차트
제한 사항: 막대, 선
에 내장한 차트입니다. 해 보입니다.jQ차트는 애니메이션 전환 기능과 드래그/드롭 기능을 차트에 내장한 특이한 차트입니다. 하지만 약간 투박하고 무의미해 보입니다.만약 당신이 그것을 얻는다면 그것은 멋진 차트를 생성합니다.CSS설정은 옳지만, 더 나은 것들이 있습니다.
터프 그래프
제한 사항: 막대 및 쌓인 막대
터프테그래프는 스스로를 "엄마에게 보여줄 예쁜 막대 그래프"라고 판매합니다.그것은 가까이 오고, 플로트가 더 예쁘지만, 터프테는 스스로를 매우 가볍게 만듭니다.제한이 있기는 하지만 선택할 수 있는 옵션이 거의 없기 때문에 주어진 것을 얻을 수 있습니다.빠른 윈 바 차트를 확인해 보십시오.
jqPlot은 꽤 좋아 보이고 오픈 소스입니다.
다음은 가장 인상적이고 최신 jqPlot 예제에 대한 링크입니다.
ZingChart를 스택 위에 올려놓아 좋은 측정을 할 수 있는 좋은 제안들이 많이 있습니다.우리는 최근에 차트를 더 쉽게 만들고 사용자 지정할 수 있는 라이브러리용 jQuery 래퍼를 출시했습니다.CDN 링크는 아래 데모에 나와 있습니다.
저는 ZingChart 팀에 속해 있으며, 여러분 중 누구라도 가질 수 있는 질문에 답하기 위해 왔습니다!
$('#pie-chart').zingchart({
"data": {
"type": "pie",
"legend": {},
"series": [{
"values": [5]
}, {
"values": [10]
}, {
"values": [15]
}]
}
});<script src="http://cdn.zingchart.com/zingchart.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.zingchart.com/zingchart.jquery.min.js"></script>
<div id="pie-chart"></div>언급되지 않은 몇 가지 다른 사항:
미니 파이, 선, 막대의 경우, Peity는 화려하고, 단순하며, 작고, 빠르며, 정말 우아한 마크업을 사용합니다.
플로트와의 관계인지는 잘 모르겠지만 플로트2는 꽤 좋고, 확실히 플로트보다 파이를 더 잘합니다.
블러프는 멋진 선 그래프를 만들지만, 저는 파이 때문에 약간의 어려움을 겪었습니다.
제가 찾던 것이 아니라 (하이차트와 유사한) 또 다른 상용 제품이 티차트입니다.
Chart.js는 다른 수많은 유형의 차트도 지원하므로 매우 유용합니다.
jQuery와 함께 사용하거나 사용하지 않을 수 있습니다.
매우 부드러운 애니메이션과 성능을 위해 Canvas를 사용하는 고급 탐색 차트를 제공하는 새로운 플레이어가 있습니다.
차트의 예:
설명서: https://zoomcharts.com/en/javascript-charts-library/charts-packages/pie-chart/
이 lib의 멋진 점:
- 다른 슬라이스를 확장할 수 있습니다.
- 파이는 계층 구조에 대한 드릴다운을 제공합니다(예 참조).
- 데이터 소스 컨트롤러를 쉽게 작성하거나 간단한 json 파일을 제공합니다.
- 상자 밖으로 고해상도 이미지 내보내기
- 풀 터치 지원, iPad, iPhone, Android 등에서 원활하게 작동합니다.
차트는 비상업적인 용도로 무료로 제공되며 상용 라이센스 및 기술 지원도 제공됩니다.
또한 대화형 시간 관리도 및 순 관리도를 사용할 수 있습니다.
차트에는 광범위한 API 및 설정이 함께 제공되므로 차트의 모든 측면을 제어할 수 있습니다.
Javascript에 대한 TeeChart
비상업적인 용도로 무료입니다.
jQuery, Node.js, WordPress, Drupal, Joomla, Microsoft TypeScript 등에 대한 플러그인 포함...
일부 데모의 일부 스크린샷:
언급URL : https://stackoverflow.com/questions/1223537/pie-chart-with-jquery
'programing' 카테고리의 다른 글
| Laravel: 다른 필드보다 커야 하는 정수 필드의 유효성을 검사합니다. (0) | 2023.08.20 |
|---|---|
| GZIP과 DEFLATE 압축의 장점은 무엇입니까? (0) | 2023.08.20 |
| AJAX 요청 및 PHP 클래스 함수 (0) | 2023.08.20 |
| 부울 모드에서 사용하는 동안 전체 텍스트 색인을 찾을 수 없습니다. (0) | 2023.08.20 |
| 부트스트랩 기본 색상을 변경하는 방법은 무엇입니까? (0) | 2023.08.20 |