플로팅

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

상호 작용의 관점에서 볼 때 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는 매우 가볍습니다. 제한 사항이 있지만 선택할 수있는 옵션이 거의 없으므로 주어진 것을 얻을 수 있습니다. 빠른 승리 막대 차트를 확인하십시오.

답변

$('#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>