7

Tôi muốn tạo một trang trong D8 cho phép người dùng của tôi nhập một số giá trị. Khi họ đã thực hiện xong, tôi muốn họ nhấp vào nút sau đó tạo hai biểu đồ hình tròn cho họ dựa trên các giá trị họ nhập.

Tôi thấy Mô-đun biểu đồ không có sẵn cho D8. Tự hỏi nếu có ai ở đây có đề xuất về cách tốt nhất để thực hiện điều này trong D8 khi viết bài này?

8 charts

— Hiền nhân
nguồn

Này Sage, merci cho (muộn) chấp nhận câu trả lời của tôi. Có phản hồi nào về trải nghiệm của bạn với Easychart trong D8 không?

— Pierre.Vriens

Np. Trên thực tế tôi không có bất kỳ phản hồi nào ngoài việc nó có vẻ hoạt động tốt. Nhà phát triển của tôi đã làm tất cả công việc với nó vì vậy tôi không có nhiều nhận xét về nó ngoài việc nó có một số tính năng hay.

— Hiền tài

Vâng, đó có vẻ như phản hồi thú vị. Tôi đã đọc những gì bạn viết như "đó là một loại hộp đen đối với tôi, nhưng tất cả những gì tôi biết là nó dường như hoạt động rất tốt" ... Vì vậy, cảm ơn bạn đã nhận xét của bạn ở đây ...

— Pierre.Vriens

3

Hãy xem mô-đun Easychart , phiên bản chính thức dành cho Drupal 8 (cũng dành cho Drupal 7).

Nó là một giao diện người dùng đồ họa, sử dụng thư viện javascript Highcharts làm công cụ biểu đồ của nó (có thể yêu cầu giấy phép thương mại mặc dù). Nó tuyên bố sẽ hỗ trợ mọi loại biểu đồ và tùy chọn Highcharts.

Một số chi tiết về mô-đun này:

Nó xác định loại nội dung mới (= Biểu đồ ) được sử dụng để thêm biểu đồ vào trang web của bạn.
Nó tạo ra một widget biểu đồ có thể được sử dụng trong các loại nội dung của riêng bạn.
Nó tích hợp với mô-đun WYSIWYG và cung cấp nút chỉnh sửa để thêm biểu đồ vào nội dung WYSIWYG của bạn ( CKeditor và TinyMCE được hỗ trợ).
Nó cung cấp một giao diện trực quan để cấu hình biểu đồ thông qua plugin Easychart.
Nó hỗ trợ dán dữ liệu CSV để tạo biểu đồ từ nó.
overheid.vlaanderen.be chứa một số ví dụ trong thế giới thực của trang web Drupal (chưa phải D8) với một số biểu đồ được tạo bằng Easycharts (bỏ qua văn bản trên trang đó nếu bạn không quen với ngôn ngữ này, chỉ tập trung vào các biểu đồ).

Tài nguyên:

— Pierre.Vriens
nguồn

1

Nếu bạn cảm thấy thoải mái về mã, bạn có thể muốn sử dụng trực tiếp API biểu đồ của Google .

Biểu đồ hình tròn:

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">

      // Load the Visualization API and the corechart package.
      google.charts.load('current', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.charts.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

        // Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');
        data.addRows([
          ['Mushrooms', 3],
          ['Onions', 1],
          ['Olives', 1],
          ['Zucchini', 1],
          ['Pepperoni', 2]
        ]);

        // Set chart options
        var options = {'title':'How Much Pizza I Ate Last Night',
                       'width':400,
                       'height':300};

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>

  <body>
    <!--Div that will hold the pie chart-->
    <div id="chart_div"></div>
  </body>
</html>

— David Thomas
nguồn

Tạo biểu đồ tương tác

Tài nguyên: