Chart.js: biểu đồ không được hiển thị

Tôi muốn sử dụng Chart.js để tạo biểu đồ tuyệt đẹp vào trang web.Chart.js: biểu đồ không được hiển thị

Tiếp theo tài liệu hướng dẫn, tôi đã viết đoạn code như sau:

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <meta charset="utf-8"/> 
    <title>Chart.js demo</title> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/0.2.0/Chart.min.js" type="text/javascript"></script> 
</head> 

<body> 
    <script> 
     var pieData = [ 
      { 
       value: 20, 
       color:"#878BB6" 
      }, 
      { 
       value : 40, 
       color : "#4ACAB4" 
      }, 
      { 
       value : 10, 
       color : "#FF8153" 
      }, 
      { 
       value : 30, 
       color : "#FFEA88" 
      } 
     ]; 
     // Get the context of the canvas element we want to select 
     var countries= document.getElementById("countries").getContext("2d"); 
     new Chart(countries).Pie(pieData); 
    </script> 

    <h1>Chart.js Sample</h1> 
    <canvas id="countries" width="600" height="400"></canvas> 
</body> 

</html>

Đó là lý do tại sao bảng xếp hạng không xuất hiện?

Nguồn

2014-07-21 vdenotaris

Loại bỏ các phần của câu hỏi mà cả hai câu trả lời tham khảo không có ý nghĩa. –

Mặc dù không liên quan đến kịch bản cụ thể này, tôi muốn nhận xét rằng nếu biểu đồ được tạo bên trong phần tử hid ('display: none') và phần tử được hiển thị sau, biểu đồ sẽ không hiển thị. Chỉ workaround tôi tìm thấy là để hiển thị các yếu tố trước khi tạo biểu đồ (gọi 'chart.resize()' sẽ không hoạt động hoặc). Điều này khiến tôi hai lần như vậy với nhận xét này, tôi sẽ không quên nữa ... – Parziphal

@Parziphal hahaha XD – Xsmael

Đầu tiên, bạn cần phải đặt kịch bản của bạn sau khi tuyên bố canvas. Sau đó, xóa các tùy chọn bánh (hoặc xác định chúng).

<html> 
<head> 
    <meta charset="utf-8"/> 
    <title>Chart.js demo</title> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/0.2.0/Chart.min.js" type="text/javascript"></script> 
</head> 
<body> 


    <h1>Chart.js Sample</h1> 

    <canvas id="countries" width="600" height="400"></canvas> 
     <script> 
     var pieData = [ 
      { 
       value: 20, 
       color:"#878BB6" 
      }, 
      { 
       value : 40, 
       color : "#4ACAB4" 
      }, 
      { 
       value : 10, 
       color : "#FF8153" 
      }, 
      { 
       value : 30, 
       color : "#FFEA88" 
      } 
     ]; 
     // Get the context of the canvas element we want to select 
     var countries= document.getElementById("countries").getContext("2d"); 
     new Chart(countries).Pie(pieData); 
    </script> 
</body>

Nguồn

2014-07-21 12:56:48

pieOptions is null :) chỉ cần xóa nó khỏi cuộc gọi .Pie() của bạn.

http://jsbin.com/decagicu/1/

Và giữ kịch bản điều khiển trình duyệt của bạn mở, vì vậy bạn có thể xem tất cả các đầu ra có giá trị nó cung cấp cho bạn :)

Nguồn

2014-07-21 12:53:07 Brunis

Nó vẫn không hoạt động. Lưu ý: Tôi đang sử dụng Chrome. – vdenotaris

Tôi vừa truy cập liên kết đó trong Chrome và PieChart của bạn được hiển thị. bạn có thể kiểm tra và tìm thấy bất kỳ lỗi nào trong bảng điều khiển không? – Brunis

Tôi đã sửa lỗi bằng cách làm theo gợi ý của Julien Malige. Cảm ơn bạn anyway – vdenotaris

Chart.js: biểu đồ không được hiển thị

Trả lời

Các vấn đề liên quan