chart.js应用中遇到的问题
Posted MrZWJ
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了chart.js应用中遇到的问题相关的知识，希望对你有一定的参考价值。
问题一：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应用中遇到的问题的主要内容，如果未能解决你的问题，请参考以下文章