Biểu đồ hình tròn của D3.js được thực hiện siêu dễ dàng: D3Pie


Phạm Giang Nam
3 năm trước
Hữu ích 0 Chia sẻ Viết bình luận 0
Đã xem 4589

Theo trang web của mình , thì d3pie là một tập lệnh đơn giản, có cấu hình cao được xây dựng trên d3.js để tạo các biểu đồ hình tròn đơn giản, hấp dẫn. Nó miễn phí - mã nguồn mở.

Nếu bạn đã từng nghiên cứu các biểu đồ hiệu suất cao và tùy biến sâu, thì chắc chắn bạn đã xem qua các biểu đồ D3. Biểu đồ D3 là một thư viện khổng lồ và có một số bài đăng để thực hiện chúng. Bạn có thể sáng tạo mà không có giới hạn.

Hãy xem những gì d3pie có thể làm cho bạn.

Các tùy chọn cấu hình bao gồm:

  • Biểu đồ hình tròn / bánh rán.
  • Tiêu đề, phụ đề, văn bản chân trang và kiểm soát vị trí.
  • Nhãn bên trong và bên ngoài; sự lựa chọn của những dữ liệu xuất hiện trong mỗi.
  • Tính toán tỷ lệ phần trăm tự động.
  • Không giới hạn kích thước tập dữ liệu.
  • Kiểm soát hoàn toàn về phông chữ, kích thước phông chữ, màu sắc.
  • Màu sắc phân khúc.
  • Phân nhóm nhỏ.
  • Màu nền / độ trong suốt.
  • Tải, di chuột và nhấp vào hiệu ứng.
  • Các cuộc gọi lại cho các sự kiện click, mouseover và mouseout.
  • API để làm mới và tái tạo bánh một cách linh hoạt.
  • Kiểm soát phần đệm biểu đồ hình tròn và biểu đồ x / y offset.

Bây giờ hãy bắt đầu với việc thực hiện

Bạn chỉ cần hai thư viện:

  1. d3.min.js .
  2. d3Pie.min.js .

Tạo một index.html tệp đơn giản , viết mã trong đó và mở bằng trình duyệt:

<html>
<head></head>
<body>
<div id="myPie"></div>
<script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
<!-- <script src="https://d3js.org/d3-selection.v1.js"></script> -->
 
<script src="d3pie.js"></script>
<script src="d3.min.js"></script>
<script>
    var pie = new d3pie("myPie", {
    header: {
        title: {
            text: "A very simple example pie"
        }
    },
    data: {
        content: [
            { label: "JavaScript", value: 50 },
            { label: "Ruby", value: 20 },
            { label: "Java", value: 30},
        ]
     },
 
    //Here further operations/animations can be added like click event, cut out the clicked pie section.
     callbacks: {
        onMouseoverSegment: function(info) {
            console.log("mouse in", info);
        },
        onMouseoutSegment: function(info) {
            console.log("mouseout:", info);
        }
    }
      
});
 
</script>
</body>
</html>

Điều này sẽ tạo ra đầu ra sau đây:

Bây giờ hãy làm cho nó phức tạp.

Lưu ý dòng trong đoạn mã trên: Có thể thêm các hoạt động / hoạt hình khác như nhấp vào sự kiện, cắt bỏ phần bánh đã nhấp.

Hãy tạo một tệp complex.html và thêm nội dung này:

<html>
<head></head>
<body>
<div id="pie"></div>
<button id="addData"> Add Data </button>
 
<script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
<script   src="https://code.jquery.com/jquery-3.2.1.min.js" crossorigin="anonymous"></script>
 
<script src="d3pie.js"></script>
<script src="d3.min.js"></script>
<script>
    var data = [
          { label: "1", value: 1 },
          { label: "2", value: 4 },
          { label: "3", value: 3 }
        ];
 
        var pie = new d3pie("pie", {
          data: {
            content: data
          }
        });
 
        $(function() {
          var num = 4;
          $("#addData").on("click", function() {
            data.push({
              label: num.toString(),
              value: Math.floor(Math.random() * 10) + 1
            });
 
            pie.updateProp("data.content", data);
            num++;
          });
        });
</script>
</body>
</html>

Điều này sẽ tạo ra một đầu ra như thế này:

Hy vọng rằng, bài viết này đã giúp bạn trong việc tìm kiếm để thực hiện biểu đồ nhanh chóng.

Tài liệu tham khảo

Hữu ích 0 Chia sẻ Viết bình luận 0
Đã xem 4589