lỗi chưa gặp: Không thể đọc thuộc 'offsetWidth' không xác định - chart.js

Question

Tôi có html đơn giản này:

<canvas id="myChart" width="400" height="400"></canvas> 

và điều này JS:

var ctx = document.getElementById("myChart"); 

    var myChart = new Chart(ctx, { 
     type: 'bar', 
     data: { 
      labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], 
      datasets: [{ 
       label: '# of Votes', 
       data: [12, 19, 3, 5, 2, 3], 
       backgroundColor: [ 
        'rgba(255, 99, 132, 0.2)', 
        'rgba(54, 162, 235, 0.2)', 
        'rgba(255, 206, 86, 0.2)', 
        'rgba(75, 192, 192, 0.2)', 
        'rgba(153, 102, 255, 0.2)', 
        'rgba(255, 159, 64, 0.2)' 
       ], 
       borderColor: [ 
        'rgba(255,99,132,1)', 
        'rgba(54, 162, 235, 1)', 
        'rgba(255, 206, 86, 1)', 
        'rgba(75, 192, 192, 1)', 
        'rgba(153, 102, 255, 1)', 
        'rgba(255, 159, 64, 1)' 
       ], 
       borderWidth: 1 
      }] 
     }, 
     options: { 
      scales: { 
       yAxes: [{ 
        ticks: { 
         beginAtZero: true 
        } 
       }] 
      } 
     } 
    }); 

Mặc dù vải được cấu hình với myChart id, tôi nhận được lỗi sau:

Uncaught TypeError: Cannot read property 'offsetWidth' of undefined 

JSFiddle: https://jsfiddle.net/kroejrhx/

Answer 1

Sau khi xem lại câu hỏi, đây là vấn đề của bạn: bạn đang sử dụng phiên bản sai của chart.js. Theo this section, nếu bạn muốn sử dụng trục dựa trên thời gian, bạn cần phải bao gồm rõ ràng moment.js hoặc sử dụng phiên bản gói.

Thay đổi tài nguyên trong jsfiddle thành https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.bundle.min.js sẽ hiển thị biểu đồ dự kiến. Không cần phải thay đổi mã.

Answer 2

Nếu bạn muốn sử dụng Chart.js v2.0 thì CDN này sẽ hoạt động.

https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.bundle.min.js