Tôi muốn tạo một biểu đồ hình tròn trong JavaScript. Khi tìm kiếm, tôi đã tìm thấy API Google Charts. Vì chúng tôi đang sử dụng jQuery nên tôi thấy rằng có tích hợp jQuery cho Google Charts .

Nhưng vấn đề của tôi là ở đây dữ liệu thực tế được gửi đến máy chủ Google để tạo biểu đồ. Có cách nào để ngăn không cho dữ liệu được gửi đến Google không? Tôi lo ngại về việc gửi dữ liệu của mình cho bên thứ ba.

jqPlot trông khá đẹp và nó là mã nguồn mở.

Đây là liên kết đến các ví dụ jqPlot ấn tượng và cập nhật nhất .

Đánh lô đề

Hạn chế: đường thẳng, điểm, vùng tô, thanh, bánh và sự kết hợp của những

Từ góc độ tương tác, Flot cho đến nay sẽ giúp bạn có được đồ thị Flash càng gần càng tốt jQuery. Mặc dù kết quả đầu ra của biểu đồ khá mượt mà và đẹp mắt, bạn cũng có thể tương tác với các điểm dữ liệu. Ý tôi là bạn có thể di chuột qua một điểm dữ liệu và nhận phản hồi trực quan về giá trị của điểm đó trong biểu đồ.

Phiên bản thân của flot hỗ trợ biểu đồ hình tròn.

Khả năng Flot Zoom.

Trên hết, bạn cũng có khả năng chọn một phần của biểu đồ để lấy lại dữ liệu cho một “vùng” cụ thể. Là một tính năng phụ của “phân vùng” này, bạn cũng có thể chọn một khu vực trên biểu đồ và phóng to để xem các điểm dữ liệu kỹ hơn một chút. Rất tuyệt .

Đường gấp khúc

Hạn chế: Hình tròn, Đường thẳng, Thanh, Kết hợp

Sparklines là công cụ vẽ đồ thị mini yêu thích của tôi. Thực sự tuyệt vời cho biểu đồ kiểu bảng điều khiển (hãy nghĩ đến bảng điều khiển Google Analytics trong lần đăng nhập tiếp theo). Bởi vì chúng rất nhỏ, chúng có thể được bao gồm trong hàng (như trong ví dụ trên). Một ý tưởng hay khác có thể được sử dụng trong tất cả các plugin vẽ đồ thị là khả năng tự làm mới. Bản trình diễn Tốc độ chuột của họ cho bạn thấy sức mạnh của biểu đồ trực tiếp ở mức tốt nhất.

Biểu đồ truy vấn 0,21

Hạn chế: Diện tích, Đường thẳng, Thanh và sự kết hợp của những

jQuery Chart 0.21 không phải là plugin tạo biểu đồ đẹp nhất hiện có. Nó khá cơ bản về chức năng khi nói đến các biểu đồ mà nó có thể xử lý, tuy nhiên nó có thể linh hoạt nếu bạn có thể dành chút thời gian và nỗ lực cho nó.

Thêm giá trị vào biểu đồ tương đối đơn giản:

.chartAdd({

    "label"  : "Leads",
    "type"   : "Line",
    "color"  : "#008800",
    "values" : ["100","124","222","44","123","23","99"]
});

jQchart

Hạn chế: Thanh, Dòng

jQchart là một điều kỳ lạ, họ đã tích hợp các chuyển đổi hoạt ảnh và chức năng kéo / thả vào biểu đồ, tuy nhiên nó hơi rắc rối - và dường như vô nghĩa. Nó tạo ra các biểu đồ đẹp mắt nếu bạn CSSthiết lập đúng, nhưng có nhiều thứ tốt hơn ở đó.

TufteGraph

Hạn chế: Thanh và Thanh xếp chồng

Tuftegraph tự bán mình dưới dạng "biểu đồ thanh đẹp mà bạn sẽ cho mẹ bạn xem". Nó đến gần, Flot đẹp hơn, nhưng Tufte cho thấy mình rất nhẹ. Mặc dù đi kèm với đó là các hạn chế - có rất ít tùy chọn để lựa chọn, vì vậy bạn sẽ nhận được những gì bạn được cung cấp. Kiểm tra nó để biết một biểu đồ thanh thắng nhanh.

Rất nhiều đề xuất tuyệt vời ở đây, chỉ cần ném ZingChart vào ngăn xếp để có biện pháp tốt. Gần đây, chúng tôi đã phát hành trình bao bọc jQuery cho thư viện giúp việc xây dựng và tùy chỉnh biểu đồ thậm chí còn dễ dàng hơn. Các liên kết CDN có trong bản demo bên dưới.

Tôi thuộc nhóm ZingChart và chúng tôi ở đây để trả lời bất kỳ câu hỏi nào mà bất kỳ ai trong số các bạn có thể có!

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

Một số khác chưa được đề cập:

Đối với bánh nướng nhỏ, đường kẻ và thanh, Peity rất rực rỡ, đơn giản, nhỏ, nhanh chóng, sử dụng đánh dấu thực sự trang nhã.

Tôi không chắc về mối quan hệ của nó với Flot (tên của nó), nhưng Flotr2 khá tốt, chắc chắn làm bánh ngon hơn Flot.

Bluff tạo ra các biểu đồ đường thẳng đẹp mắt, nhưng tôi đã gặp một chút rắc rối với bánh nướng của nó.

Không phải những gì tôi theo đuổi, mà là một sản phẩm thương mại khác (giống như Highcharts) là TeeChart .

Chart.js khá hữu ích, hỗ trợ nhiều loại biểu đồ khác.

Nó có thể được sử dụng cả với jQuery và không.

Có một người chơi mới trong lĩnh vực này, cung cấp Biểu đồ điều hướng nâng cao đang sử dụng Canvas cho hoạt ảnh và hiệu suất siêu mượt:

https://zoomcharts.com/

Ví dụ về biểu đồ:

Tài liệu: https://zoomcharts.com/en/javascript-charts-library/charts-packages/pie-chart/

Điều thú vị về lib này:

• Các lát khác có thể được mở rộng
• Pie cung cấp thông tin chi tiết về cấu trúc phân cấp (xem ví dụ)
• dễ dàng viết bộ điều khiển nguồn dữ liệu của riêng bạn hoặc cung cấp tệp json đơn giản
• xuất hình ảnh độ phân giải cao ra khỏi hộp
• hỗ trợ cảm ứng đầy đủ , hoạt động trơn tru trên iPad, iPhone, Android, v.v.

Biểu đồ miễn phí cho mục đích sử dụng phi thương mại, giấy phép thương mại và hỗ trợ kỹ thuật cũng có sẵn.

Ngoài ra, biểu đồ Thời gian tương tác và Biểu đồ ròng cũng có sẵn để bạn sử dụng.

Biểu đồ đi kèm với API và Cài đặt mở rộng, vì vậy bạn có thể kiểm soát mọi khía cạnh của biểu đồ.

Kiểm tra TeeChart để tìm Javascript

• Miễn phí cho mục đích sử dụng phi thương mại.

• Bao gồm các plugin cho jQuery , Node.js, WordPress, Drupal, Joomla, Microsoft TypeScript, v.v.

• Các bản trình diễn tương tác ở đây và ở đây .

• Một số ảnh chụp màn hình của một số bản demo: