问题一：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
chart.js应用中遇到的问题
原文地址：https://www.cnblogs.com/MrZWJ/p/10042501.html