chart.js應用中遇到的問題
阿新 • • 發佈：2018-11-30
問題一：chart.js的版本問題：開啟官網https://github.com/chartjs/Chart.js/releases/tag/v2.7.3，點選Tags，選擇最新版本，我這裡選用的是V2.7.3，下載對應的ZIP檔案，下載好後，解壓縮，開啟dist資料夾，找 到對應的chart.js檔案，複製到自己的開發路徑下，使用<script src="Chart.js"></script>其中路徑新增自己的chart.js路徑，我這裡是拷貝到了當前路徑下面，到此就相當於引入了外部的chart.js的外掛了。
問題二：自從引入了chart.js檔案，使用new Chart(ctx, config);會產生canvas畫布的頁面大小無法控制的情況發生，解決辦法：用一個 div元素將canvas畫布包圍起來，指定div元素的大小，而不是指定canvas元素 的大小，如：
<div id="canvas-holder" style="width:40%">
<canvas id="chart-area"></canvas>
</div>
問題三：data部分或者說是config部分，這裡的資料最好還是在問題一中下載的檔案中開啟samples資料夾下的chart資料夾，找到對應的案例，分析config的資料部分
餅狀圖例項原始碼及效果圖：
<!doctype html>
<html>
<head>
<title>Pie Chart</title>
<script src="Chart.js"></script>
</head>
<body>
<div id="canvas-holder" style="width:40%">
<canvas id="chart-area"></canvas>
</div>
<script>
var randomScalingFactor = function() {
return Math.round(Math.random() * 100);
};
var config = {
type: 'pie',
data: {
datasets: [{
data: [
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
],
backgroundColor: [
"red",
"orange",
"yellow",
"green",
"blue",
],
label: 'Dataset 1'
}],
labels: [
'Red',
'Orange',
'Yellow',
'Green',
'Blue'
]
},
options: {
responsive: true
}
};
window.onload = function() {
var ctx = document.getElementById('chart-area').getContext('2d');
window.myPie = new Chart(ctx, config);
};
</script>
</body>
</html>
效果圖如圖所示：
參考部落格：https://www.cnblogs.com/dealblog/p/7106935.html