项目中canvas技术的主要用途:
(1)绘制统计图
(2)小游戏
(3)绘图板
(4)动态的背景(带交互带动画)
提示:第三方的绘图工具非常多!直接百度"js绘图工具"!
第三方工具的使用步骤:
(1)打开官网,看工具介绍
Simple yet flexible JavaScript charting for designers & developers
一款开源的,提供了8种图标的,基于canvas,响应式图标绘图工具库
(2)参考demo,编写实例程序
var c=new Chart(canvasId,{
type:'bar ' , //图表类型,共8种
data:{ } , //图标必须的数据
option:{ } , //可选项
});
(3)查看API document,实现自己的项目需求
参考手册中的实例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h3>第三方绘图功能---chart.js的使用</h3>
<canvas id="c15" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
<script>
var ctx=c15.getContext('2d');
new Chart(ctx,{
type:'bar',
data:{
labels:['部门1','部门2','部门3','部门4','部门5','部门6'], //x轴说明文字
datasets:[
{
label:'年度销售总结',
data:[400,300,500,200,500,480]
}
]
},
options:{
responsive:false,
scales:{
yAxes:[{
ticks:{
beginAtZero:true,
}
}]
}
}
});
</script>
</body>
</html>