無法使用Chart.js初始化餅圖

Question

我正在複製Chart.js中的示例，並且卡住了我正在製作的錯誤。

這裏是我的代碼（從例子中獲取）：

<canvas id="myChart" width="400" height="400"></canvas> 
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 
<script src=" https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js" charset="utf-8"></script> 
<script type="text/javascript"> 
    // Get the context of the canvas element we want to select 
    var ctx = document.getElementById("myChart").getContext("2d"); 
    var myNewChart = new Chart(ctx[0]).Pie(data); 
    var data = [{ 
     value: 300, 
     color: "#F7464A", 
     highlight: "#FF5A5E", 
     label: "Red" 
    }, { 
     value: 50, 
     color: "#46BFBD", 
     highlight: "#5AD3D1", 
     label: "Green" 
    }, { 
     value: 100, 
     color: "#FDB45C", 
     highlight: "#FFC870", 
     label: "Yellow" 
    }] 
</script> 

此代碼給我一個錯誤：

Uncaught TypeError: Cannot read property 'canvas' of undefined

現在，如果我改變myNewChart VAR到：

var myNewChart = new Chart(ctx).Pie(data); 

我得到沒有錯誤，沒有圖表。

我錯過了什麼？我覺得這件事情很明顯......

感謝

Answer 1

兩個與您的代碼的問題。

首先，您在data傳遞給Chart()後分配屬性，所以餅圖將顯示爲空，因爲您沒有傳遞任何數據。

其次，.getContext('2d')不會返回數組，而是返回一個單獨的呈現上下文（或null）。所以ctx[0]是未定義的。

修改您的代碼如下，它應該工作。

var ctx = document.getElementById("myChart").getContext("2d"); 

var data = [{ 
    value: 300, 
    color: "#F7464A", 
    highlight: "#FF5A5E", 
    label: "Red" 
}, { 
    value: 50, 
    color: "#46BFBD", 
    highlight: "#5AD3D1", 
    label: "Green" 
}, { 
    value: 100, 
    color: "#FDB45C", 
    highlight: "#FFC870", 
    label: "Yellow" 
}]; 

var myNewChart = new Chart(ctx).Pie(data); 

Answer 2

的問題是在這裏

var myNewChart = new Chart(ctx[0]).Pie(data); 

ctx[0]是不確定的。

使用此：

var myNewChart = new Chart(ctx).Pie(data);