chart.js之餅圖谷歌瀏覽器的畫布不顯示

測試版本：
谷歌瀏覽器 - 56.0.2924.87
Mozilla Firefox瀏覽器 - 在開發我的應用程序在Chrome 51.0.1（32位）chart.js之餅圖谷歌瀏覽器的畫布不顯示

，我能夠在下面插入一個帶有圖例的餡餅圖形。但是一段時間後，我又去了那個頁面，圖表不再呈現。嘗試在Firefox中，它呈現。
因此，通過我的測試，我能夠檢測到通過將Chart.js版本從0.2.0更新到2.5.0，Chrome無法呈現圖形。

這是真的，只有Chart.JS版本在Chrome中工作是0.2.0，或者我的測試是錯誤的？

測試：

使用chart.js之v 0.2.0在Chrome

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 myChart = document.getElementById("myChart").getContext("2d"); 
 
new Chart(myChart).Pie(pieData);

<!DOCTYPE html> 
 
<html> 
 

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

 
<body> 
 
    <script> 
 
    </script> 
 

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

 
</html>

使用chart.js之v 2.5.0

。

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 ctx = document.getElementById("myData").getContext("2d"); 
 
//new Chart(ctx).Pie(pieData); 
 
/* New way to instantiate so that it do not thows Uncaught 
 
TypeError: (intermediate value).Pie is not a function" */ 
 
var myPieChart = new Chart(ctx, { 
 
    type: 'pie', 
 
    data: pieData 
 

 
});

<!DOCTYPE html> 
 
<html> 
 

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

 
<body> 
 
    <script> 
 
    </script> 
 

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

 
</html>

來源

2017-03-02 Luís Alves

你的數據結構2.5.0版本是完全錯誤的，它需要看起來更像這個（如果它是在Firefox中使用的顯示數據結構，那麼我不知道爲什麼爲你工作，因爲它不應該有）：

var pieData = { 
    labels: ["Purple", "Green", "Orange", "Yellow"], 
    datasets: [ 
     { 
      data: [20, 40, 10, 30], 
      backgroundColor: [ 
        "#878BB6", 
        "#4ACAB4", 
        "#FF8153", 
        "#FFEA88" 
      ] 
     }] 
};

請注意它不再是一個對象數組，而是一個包含數組的對象。此外pieData的直接屬性是標籤和數據集，然後數據集被分成值和背景顏色。

鏈接到餅圖數據結構的文件供參考：Chart JS Documentation

的jsfiddle例如：https://jsfiddle.net/0vh3xhsw/2/

來源

2017-03-02 10:18:20 DibsyJr

確定我的錯誤。你的回答是對的。謝謝！ –

謝謝，沒問題:) – DibsyJr

謝謝！這是正確的答案！ –

chart.js之餅圖谷歌瀏覽器的畫布不顯示

回答

相關問題