2016-06-01 21 views
9

私はこの単純なHTMLがあります。キャッチされない例外TypeError:プロパティを読み取ることができません 'offsetWidth' 未定義の - chart.js

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

をして、これは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 
        } 
       }] 
      } 
     } 
    }); 

キャンバスがmyChartで構成されていても

Uncaught TypeError: Cannot read property 'offsetWidth' of undefined 

JSFiddle:ID、私は次のエラーを取得する https://jsfiddle.net/kroejrhx/

答えて

26

問題を再訪した後、ここにあなたの問題があります:間違ったバージョンのchart.jsを使用しています。 this sectionによると、時間ベースの軸を使用する場合は、明示的にmoment.jsを含めるか、バンドル版を使用する必要があります。

jsfiddleのリソースをhttps://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.bundle.min.jsに変更すると、予想されるグラフが表示されます。コードをまったく変更する必要はありません。

+0

10x。今私は何のエラーもないが、まだグラフを表示しません。 – ohadinho

+0

ありがとうたくさんこれは2.1.4のバージョンが '不動産を読むことができません '_view' chartjsの未定義の問題を修正しました – kaxi1993

+0

ありがとう、完璧に働いています。 – AndrewLeonardi

関連する問題