JavaScript로 원형 차트를 만들고 싶습니다. 검색에서 Google Charts API를 찾았습니다. jQuery를 사용하고 있기 때문에 Google Charts에 사용할 수있는 jQuery 통합 이 있다는 것을 알았습니다 .

하지만 내 문제는 여기에 실제 데이터가 차트를 만들기 위해 Google 서버로 전송된다는 것입니다. 데이터가 Google로 전송되는 것을 방지 할 수있는 방법이 있습니까? 내 데이터를 제 3 자에게 보내는 것이 걱정됩니다.

jqPlot 은 꽤 좋아 보이며 오픈 소스입니다.

다음은 가장 인상적이고 최신 jqPlot 예제에 대한 링크 입니다.

플로팅

제한 사항 : 선, 점, 채워진 영역, 막대, 파이 및 이들의 조합

상호 작용의 관점에서 볼 때 Flot은에서 얻을 수있는 한 플래시 그래프에 최대한 가깝게 만들 것입니다 jQuery. 그래프 출력은 매우 매끄럽고 멋지게 보이지만 데이터 포인트와 상호 작용할 수도 있습니다. 이것이 의미하는 바는 데이터 포인트 위로 마우스를 가져가 그래프에서 해당 포인트의 값에 대한 시각적 피드백을 얻을 수 있다는 것입니다.

flot의 트렁크 버전은 파이 차트를 지원합니다.

플로트 줌 기능.

또한 그래프의 청크를 선택하여 특정 "영역"에 대한 데이터를 다시 가져올 수도 있습니다. 이 "영역 지정"의 보조 기능으로 그래프에서 영역을 선택하고 확대하여 데이터 포인트를 좀 더 자세히 볼 수도 있습니다. 아주 멋지다 .

스파크 라인

제한 사항 : 파이, 선, 막대, 조합

스파크 라인은 제가 가장 좋아하는 미니 그래프 도구입니다. 대시 보드 스타일 그래프에 정말 좋습니다 (다음에 로그인 할 때 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"]
});

jQchart

제한 사항 : 막대, 선

jQchart는 이상한 것입니다. 그들은 애니메이션 트랜지션과 드래그 / 드롭 기능을 차트에 내장했습니다. 그러나 그것은 약간 투박하고 무의미 해 보입니다. CSS설정을 올바르게 하면 멋진 차트를 생성 하지만 더 나은 방법이 있습니다.

TufteGraph

제한 사항 : 막대 및 누적 막대

Tuftegraph는 "어머니에게 보여줄 예쁜 막대 그래프"로 스스로 판매합니다. 가까워지고 Flot이 더 예쁘지 만 Tufte는 매우 가볍습니다. 제한 사항이 있지만 선택할 수있는 옵션이 거의 없으므로 주어진 것을 얻을 수 있습니다. 빠른 승리 막대 차트를 확인하십시오.

여기에 훌륭한 제안이 많이 있습니다. 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 는 훌륭하고 단순하며 작고 빠르며 정말 우아한 마크 업을 사용합니다.

Flot 과의 관계 는 확실하지 않지만 Flotr2 는 꽤 훌륭하고 확실히 Flot 보다 더 나은 파이를 제공합니다.

Bluff 는 멋진 선 그래프를 생성하지만 파이에 약간의 문제가있었습니다.

내가 추구했던 것은 아니지만 다른 상용 제품 (Highcharts와 매우 유사)은 TeeChart 입니다.

Chart.js 는 많은 다른 유형의 차트도 지원하는 매우 유용합니다.

jQuery와 함께 사용하거나 사용하지 않고 모두 사용할 수 있습니다.

매우 부드러운 애니메이션과 성능을 위해 Canvas를 사용하는 고급 탐색 차트를 제공하는 새로운 플레이어가 현장에 있습니다.

https://zoomcharts.com/

차트의 예 :

문서 : https://zoomcharts.com/en/javascript-charts-library/charts-packages/pie-chart/

이 lib의 멋진 점 :

• 다른 슬라이스는 확장 가능
• Pie는 계층 구조에 대한 드릴 다운을 제공합니다 (예제 참조).
• 자신의 데이터 소스 컨트롤러를 쉽게 작성하거나 간단한 json 파일 제공
• 고해상도 이미지를 즉시 내보내기
• 완전한 터치 지원, iPad, iPhone, Android 등에서 원활하게 작동합니다.

차트는 비상업적 인 용도 로 무료 로 사용할 수 있으며 상용 라이센스 및 기술 지원도 제공됩니다.

또한 대화 형 시간 차트와 넷 차트를 사용할 수 있습니다.

차트는 광범위한 API 및 설정과 함께 제공되므로 차트의 모든 측면을 제어 할 수 있습니다.

Javascript 용 TeeChart 확인

• 비상업적 사용은 무료입니다.

• jQuery , Node.js, WordPress, Drupal, Joomla, Microsoft TypeScript 등의 플러그인을 포함합니다 .

• 여기 와 여기에 대화 형 데모가 있습니다 .

• 일부 데모 스크린 샷 :