码迷,mamicode.com
首页 > Web开发 > 详细

chart.js应用中遇到的问题

时间:2018-11-30 11:30:25      阅读:228      评论:0      收藏:0      [点我收藏+]

标签:res   html   解决   .com   问题:   tps   解决办法   http   text   

问题一: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应用中遇到的问题

标签:res   html   解决   .com   问题:   tps   解决办法   http   text   

原文地址:https://www.cnblogs.com/MrZWJ/p/10042501.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!