本章建议学习时间4小时
学习方式：详细阅读，并手动实现相关代码（如果没有canvas基础，需要先学习前面的canvas基础笔记）
学习目标：此教程将教会大家如何使用canvas绘制各种图表，详细分解步骤，本次讲解散点图。
演示地址： https://sutianbinde.github.io/charts/%E6%95%A3%E7%82%B9%E5%9B%BE-%E9%AB%98%E6%B8%85.html
源文件下载地址：https://github.com/sutianbinde/charts
散点图
散点图是比较好看的图表了，我们的案例展示效果如下
功能：图表可以根据数据自动变换比例，绘制点的时候有由小到大的动画，绘制平均值线条，鼠标移入到对应模块会实现颜色变化，并且显示当前项的详细信息。
实现步骤
--新建Html文件，写入总方法和数据，这次我们的代码和上几个图有所不同，我们只给定容器，而canvas通过js生成
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="chart" height="400" width="700" style="margin:50px"></div> <script type="text/javascript">
function goChart(cBox,dataArr,textArr){ } var dataArr = [[174.0, 65.6], [175.3, 71.8], [193.5, 80.7], [186.5, 72.6], [187.2, 78.8],
[181.5, 74.8], [184.0, 86.4], [184.5, 78.4], [175.0, 62.0], [184.0, 81.6],
[180.0, 76.6], [177.8, 83.6], [192.0, 90.0], [176.0, 74.6], [174.0, 71.0],
[184.0, 79.6], [192.7, 93.8], [171.5, 70.0], [173.0, 72.4], [176.0, 85.9],
[176.0, 78.8], [180.5, 77.8], [172.7, 66.2], [176.0, 86.4], [173.5, 81.8],
[178.0, 89.6], [180.3, 82.8], [180.3, 76.4], [164.5, 63.2], [173.0, 60.9],
[183.5, 74.8], [175.5, 70.0], [188.0, 72.4], [189.2, 84.1], [172.8, 69.1],
[170.0, 59.5], [182.0, 67.2], [170.0, 61.3], [177.8, 68.6], [184.2, 80.1],
[186.7, 87.8], [171.4, 84.7], [172.7, 73.4], [175.3, 72.1], [180.3, 82.6],
[182.9, 88.7], [188.0, 84.1], [177.2, 94.1], [172.1, 74.9], [167.0, 59.1],
[169.5, 75.6], [174.0, 86.2], [172.7, 75.3], [182.2, 87.1], [164.1, 55.2],
[163.0, 57.0], [171.5, 61.4], [184.2, 76.8], [174.0, 86.8], [174.0, 72.2],
[177.0, 71.6], [186.0, 84.8], [167.0, 68.2], [171.8, 66.1], [182.0, 72.0],
[167.0, 64.6], [177.8, 74.8], [164.5, 70.0], [192.0, 101.6], [175.5, 63.2],
[171.2, 79.1], [181.6, 78.9], [167.4, 67.7], [181.1, 66.0], [177.0, 68.2],
[174.5, 63.9], [177.5, 72.0], [170.5, 56.8], [182.4, 74.5], [197.1, 90.9],
[180.1, 93.0], [175.5, 80.9], [180.6, 72.7], [184.4, 68.0], [175.5, 70.9],
[180.6, 72.5], [177.0, 72.5], [177.1, 83.4], [181.6, 75.5], [176.5, 73.0],
[175.0, 70.2], [174.0, 73.4], [165.1, 70.5], [177.0, 68.9], [192.0, 102.3],
[176.5, 68.4], [169.4, 65.9], [182.1, 75.7], [179.8, 84.5], [175.3, 87.7],
[184.9, 86.4], [177.3, 73.2], [167.4, 53.9], [178.1, 72.0], [168.9, 55.5],
[157.2, 58.4], [180.3, 83.2], [170.2, 72.7], [177.8, 64.1], [172.7, 72.3],
[165.1, 65.0], [186.7, 86.4], [165.1, 65.0], [174.0, 88.6], [175.3, 84.1],
[185.4, 66.8], [177.8, 75.5], [180.3, 93.2], [180.3, 82.7], [177.8, 58.0],
[177.8, 79.5], [177.8, 78.6], [177.8, 71.8], [177.8, 116.4], [163.8, 72.2],
[188.0, 83.6], [198.1, 85.5], [175.3, 90.9], [166.4, 85.9], [190.5, 89.1],
[166.4, 75.0], [177.8, 77.7], [179.7, 86.4], [172.7, 90.9], [190.5, 73.6],
[185.4, 76.4], [168.9, 69.1], [167.6, 84.5], [175.3, 64.5], [170.2, 69.1],
[190.5, 108.6], [177.8, 86.4], [190.5, 80.9], [177.8, 87.7], [184.2, 94.5],
[176.5, 80.2], [177.8, 72.0], [180.3, 71.4], [171.4, 72.7], [172.7, 84.1],
[172.7, 76.8], [177.8, 63.6], [177.8, 80.9], [182.9, 80.9], [170.2, 85.5],
[167.6, 68.6], [175.3, 67.7], [165.1, 66.4], [185.4, 102.3], [181.6, 70.5],
[172.7, 95.9], [190.5, 84.1], [179.1, 87.3], [175.3, 71.8], [170.2, 65.9],
[193.0, 95.9], [171.4, 91.4], [177.8, 81.8], [177.8, 96.8], [167.6, 69.1],
[167.6, 82.7], [180.3, 75.5], [182.9, 79.5], [176.5, 73.6], [186.7, 91.8],
[188.0, 84.1], [188.0, 85.9], [177.8, 81.8], [174.0, 82.5], [177.8, 80.5],
[171.4, 70.0], [185.4, 81.8], [185.4, 84.1], [188.0, 90.5], [188.0, 91.4],
[182.9, 89.1], [176.5, 85.0], [175.3, 69.1], [175.3, 73.6], [188.0, 80.5],
[188.0, 82.7], [175.3, 86.4], [170.5, 67.7], [179.1, 92.7], [177.8, 93.6],
[175.3, 70.9], [182.9, 75.0], [170.8, 93.2], [188.0, 93.2], [180.3, 77.7],
[177.8, 61.4], [185.4, 94.1], [168.9, 75.0], [185.4, 83.6], [180.3, 85.5],
[174.0, 73.9], [167.6, 66.8], [182.9, 87.3], [160.0, 72.3], [180.3, 88.6],
[167.6, 75.5], [186.7, 101.4], [175.3, 91.1], [175.3, 67.3], [175.9, 77.7],
[175.3, 81.8], [179.1, 75.5], [181.6, 84.5], [177.8, 76.6], [182.9, 85.0],
[177.8, 102.5], [184.2, 77.3], [179.1, 71.8], [176.5, 87.9], [188.0, 94.3],
[174.0, 70.9], [167.6, 64.5], [170.2, 77.3], [167.6, 72.3], [188.0, 87.3],
[174.0, 80.0], [176.5, 82.3], [180.3, 73.6], [167.6, 74.1], [188.0, 85.9],
[180.3, 73.2], [167.6, 76.3], [183.0, 65.9], [183.0, 90.9], [179.1, 89.1],
[170.2, 62.3], [177.8, 82.7], [179.1, 79.1], [190.5, 98.2], [177.8, 84.1],
[180.3, 83.2], [180.3, 83.2]
]; /*
* 参数1 ：需要显示canvas的dom (非canvas标签，需要指定height和width)
* 参数2：二维数据 [0]横轴 [1]纵轴
* 参数3：横轴名称 纵轴名称
* */
goChart(document.getElementById("chart"),dataArr,["身 高","体 重"]) </script>
</body>
</html>
--在 goChart方法中定义需要使用的变量 并获取 canvas上下文
// 声明所需变量
var canvas,ctx;
// 图表属性
var cWidth, cHeight, cMargin, cSpace;
var originX, originY;
// 柱状图属性
var bMargin, tobalBars, bWidth, maxXValue, maxYValue, minXValue, minYValue;
var totalNomber;
var yAverage, minTrueYValue, maxTrueYValue; // 运动相关变量
var ctr, numctr, speed;
//鼠标移动
var mousePosition = {}; // 创建canvas并获得canvas上下文
canvas = document.createElement("canvas");
if(canvas && canvas.getContext){
ctx = canvas.getContext("2d");
} canvas.innerHTML = "你的浏览器不支持HTML5 canvas";
cBox.appendChild(canvas);
--初始化图表（接着上一步的代码写在 goChart方法中 ）
initChart(); // 图表初始化
// 图表初始化
function initChart(){
// 图表信息
cMargin = 60;
cSpace = 80;
//将canvas扩大2倍，然后缩小，以适应高清屏幕
canvas.width = cBox.getAttribute("width")* 2 ;
canvas.height = cBox.getAttribute("height")* 2;
canvas.style.height = canvas.height/2 + "px";
canvas.style.width = canvas.width/2 + "px";
cHeight = canvas.height - cMargin*2 - cSpace;
cWidth = canvas.width - cMargin*2 - cSpace;
originX = cMargin + cSpace;
originY = cMargin + cHeight; // 柱状图信息
bMargin = canvas.width/40;
tobalBars = dataArr.length;
bWidth = parseInt( cWidth/tobalBars - bMargin );
maxXValue = 0;
maxYValue = 0;
var xArr = [];
var yArr = [];
for(var i=0; i<dataArr.length; i++){
xArr.push( dataArr[i][0] );
yArr.push( dataArr[i][1] );
}
yAverage = ( eval(yArr.join("+"))/yArr.length ).toFixed(2);
var addNb = parseInt(yAverage/10); //用于在轴前后加空白 minXValue = Math.min.apply(null,xArr); //求最小值
minXValue = parseInt(Math.max(minXValue-addNb, 0)); //如果减去addNb后小于零，就取零
maxXValue = parseInt(Math.max.apply(null,xArr)+addNb); //用于轴的显示，所以取整 minYValue = minTrueYValue = Math.min.apply(null,yArr);
minYValue = parseInt(Math.max(minYValue-addNb, 0));
maxTrueYValue = Math.max.apply(null,yArr);
maxYValue = parseInt(maxTrueYValue+addNb); totalNomber = 5;
// 运动相关
ctr = 1;
numctr = 50;
speed = 1.5; }
--绘制坐标轴，以及纵横方向的线条（接着上一步的代码写在 goChart方法中 ）
实现效果如下
drawLineLabelMarkers(); // 绘制图表轴、标签和标记
// 绘制图表轴、标签和标记
function drawLineLabelMarkers(){
ctx.translate(0.5,0.5); // 当只绘制1像素的线的时候，坐标点需要偏移，这样才能画出1像素实线
ctx.font = "24px Arial";
ctx.lineWidth = 2;
ctx.fillStyle = "#000";
ctx.strokeStyle = "#000";
// y轴
drawLine(originX, originY, originX, cMargin);
// x轴
drawLine(originX, originY, originX+cWidth, originY);
// 绘制标记
drawMarkers();
ctx.translate(-0.5,-0.5); // 还原位置
}
// 画线的方法
function drawLine(x, y, X, Y){
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(X, Y);
ctx.stroke();
ctx.closePath();
}
// 绘制标记
function drawMarkers(){
ctx.strokeStyle = "#E0E0E0";
// 绘制 y
var oneYVal = (maxYValue-minYValue)/totalNomber;
ctx.textAlign = "right";
for(var i=0; i<=totalNomber; i++){
var markerVal = parseInt(i*oneYVal+minYValue);
var xMarker = originX-10;
var yMarker = parseInt( originY-cHeight*(markerVal-minYValue)/(maxYValue-minYValue) );
ctx.fillText(markerVal, xMarker, yMarker+3, cSpace); // 文字
if(i>0){
drawLine(originX+2, yMarker, originX+cWidth, yMarker);
}
}
// 绘制 x
var oneXVal = (maxXValue-minXValue)/totalNomber;
ctx.textAlign = "center";
for(var i=0; i<=totalNomber; i++){
var markerVal = parseInt(i*oneXVal+minXValue);
var xMarker = parseInt( originX+cWidth*(markerVal-minXValue)/(maxXValue-minXValue));
var yMarker = originY+30;
ctx.fillText(markerVal, xMarker, yMarker, cSpace); // 文字
if(i>0){
drawLine(xMarker, cMargin, xMarker, originY-2);
}
}
// 绘制标题 y
ctx.save();
ctx.rotate(-Math.PI/2);
ctx.fillText(textArr[1], -canvas.height/2, cSpace-10);
ctx.restore();
// 绘制标题 x
ctx.fillText(textArr[0], originX+cWidth/2, originY+cSpace/2+30);
};
--绘制散点图动画（接着上一步的代码写在 goChart方法中 ）
此处里面有对鼠标移动的处理，大家看到有mouseMove 的地方先搁置，写到后边就知道用处了
drawChartAnimate(); // 绘制柱状图的动画
//绘制动画图
function drawChartAnimate(mouseMove){
var ifTip = false;
var tipArr = null;
for(var i=0; i<dataArr.length; i++){
ctx.fillStyle = "rgba(46,199,201,0.5)";
var oX = originX+cWidth*(dataArr[i][0]-minXValue)/(maxXValue-minXValue);
var oY = originY - cHeight*(dataArr[i][1]-minYValue)/(maxYValue-minYValue);
ctx.beginPath();
ctx.arc(oX,oY,8*ctr/numctr,0, Math.PI*2,true);
if(!ifTip && mouseMove && ctx.isPointInPath(mousePosition.x*2, mousePosition.y*2)){ //如果是鼠标移动的到柱状图上，重新绘制图表
ctx.fillStyle = "rgba(46,199,201,1)";
//是否绘制提示
ifTip = true;
tipArr = dataArr[i];
}else{
ctx.fillStyle = "rgba(46,199,201,0.5)";
}
ctx.fill();
}
//绘制平均值线
drawAverageLine();
//绘制提示
ifTip && drawTips(mousePosition.x*2, mousePosition.y*2,tipArr[0],tipArr[1]);
if(ctr<numctr){
ctr++;
setTimeout(function(){
ctx.clearRect(0,0,canvas.width, canvas.height);
drawLineLabelMarkers();
drawChartAnimate();
}, speed*=1.08);
}
}
//绘制平均值线
function drawAverageLine(){
ctx.beginPath();
var yNb = originY-cHeight*(yAverage-minYValue)/(maxYValue-minYValue);
var xNb = originX+cWidth*ctr/numctr+cMargin/2;
ctx.moveTo(originX+2,yNb);
ctx.lineTo(xNb,yNb);
//设置虚线
ctx.save();
ctx.lineWidth = 4;
ctx.strokeStyle = ctx.fillStyle = "#2ec7c9";
ctx.setLineDash([10]);
ctx.stroke();
//绘制三角
ctx.beginPath();
ctx.moveTo(xNb,yNb);
ctx.lineTo(xNb-5,yNb-8);
ctx.lineTo(xNb+12,yNb);
ctx.lineTo(xNb-5,yNb+8);
ctx.fill();
//绘制文本
ctx.font = "24px Arial";
ctx.fillText(yAverage, xNb-10,yNb-10);
//还原
ctx.restore();
}
//绘制提示框
function drawTips(oX,oY,xVal,yVal){
ctx.save();
ctx.beginPath();
ctx.fillStyle = "rgba(0,0,0,0.5)";
var H = 100;
roundedRect(ctx,oX+10,oY-H/2,2*H,H,5);
ctx.fillStyle = "#fff";
ctx.fillText(textArr[1]+"："+yVal, oX+H,oY-H/10);
ctx.fillText(textArr[0]+"："+xVal, oX+H,oY+H/4);
ctx.restore();
}
//绘制圆角矩形的方法
function roundedRect(ctx,x,y,width,height,radius){
ctx.moveTo(x,x+radius);
ctx.beginPath();
ctx.lineTo(x,y+height-radius);
ctx.quadraticCurveTo(x,y+height,x+radius,y+height);
ctx.lineTo(x+width-radius, y+height);
ctx.quadraticCurveTo(x+width,y+height,x+width,y+height-radius);
ctx.lineTo(x+width,y+radius);
ctx.quadraticCurveTo(x+width,y,x+width-radius,y);
ctx.lineTo(x+radius,y);
ctx.quadraticCurveTo(x,y,x,y+radius);
ctx.closePath();
ctx.fill();
}
--监听鼠标移动，以实现移动到当前项作颜色变化（接着上一步的代码写在 goChart方法中 ）
//检测鼠标移动
var mouseTimer = null;
canvas.addEventListener("mousemove",function(e){
e = e || window.event;
if( e.offsetX || e.offsetX==0 ){
mousePosition.x = e.offsetX;
mousePosition.y = e.offsetY;
}else if( e.layerX || e.layerX==0 ){
mousePosition.x = e.layerX;
mousePosition.y = e.layerY;
} clearTimeout(mouseTimer);
mouseTimer = setTimeout(function(){
ctx.clearRect(0,0,canvas.width, canvas.height);
drawLineLabelMarkers();
drawChartAnimate(true);
},10);
});
--点击图表刷新（接着上一步的代码写在 goChart方法中 ）
//点击刷新图表
canvas.onclick = function(){
initChart(); // 图表初始化
drawLineLabelMarkers(); // 绘制图表轴、标签和标记
drawChartAnimate(); // 绘制折线图的动画
};
这样我们整个代码就编写完成了，为了代码更便于阅读，我们可以将所有方法放到后面，把调用方法的代码放到前面，经过调整的全部代码如下
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="chart" height="400" width="700" style="margin:50px"></div> <script type="text/javascript">
function goChart(cBox,dataArr,textArr){
// 声明所需变量
var canvas,ctx;
// 图表属性
var cWidth, cHeight, cMargin, cSpace;
var originX, originY;
// 柱状图属性
var bMargin, tobalBars, bWidth, maxXValue, maxYValue, minXValue, minYValue;
var totalNomber;
var yAverage, minTrueYValue, maxTrueYValue; // 运动相关变量
var ctr, numctr, speed;
//鼠标移动
var mousePosition = {}; // 创建canvas并获得canvas上下文
canvas = document.createElement("canvas");
if(canvas && canvas.getContext){
ctx = canvas.getContext("2d");
} canvas.innerHTML = "你的浏览器不支持HTML5 canvas";
cBox.appendChild(canvas); initChart(); // 图表初始化
drawLineLabelMarkers(); // 绘制图表轴、标签和标记
drawChartAnimate(); // 绘制柱状图的动画
//检测鼠标移动
var mouseTimer = null;
canvas.addEventListener("mousemove",function(e){
e = e || window.event;
if( e.offsetX || e.offsetX==0 ){
mousePosition.x = e.offsetX;
mousePosition.y = e.offsetY;
}else if( e.layerX || e.layerX==0 ){
mousePosition.x = e.layerX;
mousePosition.y = e.layerY;
} clearTimeout(mouseTimer);
mouseTimer = setTimeout(function(){
ctx.clearRect(0,0,canvas.width, canvas.height);
drawLineLabelMarkers();
drawChartAnimate(true);
},10);
}); //点击刷新图表
canvas.onclick = function(){
initChart(); // 图表初始化
drawLineLabelMarkers(); // 绘制图表轴、标签和标记
drawChartAnimate(); // 绘制折线图的动画
}; // 图表初始化
function initChart(){
// 图表信息
cMargin = 60;
cSpace = 80;
//将canvas扩大2倍，然后缩小，以适应高清屏幕
canvas.width = cBox.getAttribute("width")* 2 ;
canvas.height = cBox.getAttribute("height")* 2;
canvas.style.height = canvas.height/2 + "px";
canvas.style.width = canvas.width/2 + "px";
cHeight = canvas.height - cMargin*2 - cSpace;
cWidth = canvas.width - cMargin*2 - cSpace;
originX = cMargin + cSpace;
originY = cMargin + cHeight; // 柱状图信息
bMargin = canvas.width/40;
tobalBars = dataArr.length;
bWidth = parseInt( cWidth/tobalBars - bMargin );
maxXValue = 0;
maxYValue = 0;
var xArr = [];
var yArr = [];
for(var i=0; i<dataArr.length; i++){
xArr.push( dataArr[i][0] );
yArr.push( dataArr[i][1] );
}
yAverage = ( eval(yArr.join("+"))/yArr.length ).toFixed(2);
var addNb = parseInt(yAverage/10); //用于在轴前后加空白 minXValue = Math.min.apply(null,xArr); //求最小值
minXValue = parseInt(Math.max(minXValue-addNb, 0)); //如果减去addNb后小于零，就取零
maxXValue = parseInt(Math.max.apply(null,xArr)+addNb); //用于轴的显示，所以取整 minYValue = minTrueYValue = Math.min.apply(null,yArr);
minYValue = parseInt(Math.max(minYValue-addNb, 0));
maxTrueYValue = Math.max.apply(null,yArr);
maxYValue = parseInt(maxTrueYValue+addNb); totalNomber = 5;
// 运动相关
ctr = 1;
numctr = 50;
speed = 1.5; } // 绘制图表轴、标签和标记
function drawLineLabelMarkers(){
ctx.translate(0.5,0.5); // 当只绘制1像素的线的时候，坐标点需要偏移，这样才能画出1像素实线
ctx.font = "24px Arial";
ctx.lineWidth = 2;
ctx.fillStyle = "#000";
ctx.strokeStyle = "#000";
// y轴
drawLine(originX, originY, originX, cMargin);
// x轴
drawLine(originX, originY, originX+cWidth, originY); // 绘制标记
drawMarkers();
ctx.translate(-0.5,-0.5); // 还原位置
} // 画线的方法
function drawLine(x, y, X, Y){
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(X, Y);
ctx.stroke();
ctx.closePath();
} // 绘制标记
function drawMarkers(){
ctx.strokeStyle = "#E0E0E0";
// 绘制 y
var oneYVal = (maxYValue-minYValue)/totalNomber; ctx.textAlign = "right";
for(var i=0; i<=totalNomber; i++){
var markerVal = parseInt(i*oneYVal+minYValue);
var xMarker = originX-10;
var yMarker = parseInt( originY-cHeight*(markerVal-minYValue)/(maxYValue-minYValue) ); ctx.fillText(markerVal, xMarker, yMarker+3, cSpace); // 文字 if(i>0){
drawLine(originX+2, yMarker, originX+cWidth, yMarker);
}
} // 绘制 x
var oneXVal = (maxXValue-minXValue)/totalNomber;
ctx.textAlign = "center";
for(var i=0; i<=totalNomber; i++){ var markerVal = parseInt(i*oneXVal+minXValue);
var xMarker = parseInt( originX+cWidth*(markerVal-minXValue)/(maxXValue-minXValue));
var yMarker = originY+30;
ctx.fillText(markerVal, xMarker, yMarker, cSpace); // 文字 if(i>0){
drawLine(xMarker, cMargin, xMarker, originY-2);
}
} // 绘制标题 y
ctx.save();
ctx.rotate(-Math.PI/2);
ctx.fillText(textArr[1], -canvas.height/2, cSpace-10);
ctx.restore();
// 绘制标题 x
ctx.fillText(textArr[0], originX+cWidth/2, originY+cSpace/2+30);
}; //绘制动画图
function drawChartAnimate(mouseMove){ var ifTip = false;
var tipArr = null; for(var i=0; i<dataArr.length; i++){ ctx.fillStyle = "rgba(46,199,201,0.5)";
var oX = originX+cWidth*(dataArr[i][0]-minXValue)/(maxXValue-minXValue);
var oY = originY - cHeight*(dataArr[i][1]-minYValue)/(maxYValue-minYValue);
ctx.beginPath(); ctx.arc(oX,oY,8*ctr/numctr,0, Math.PI*2,true); if(!ifTip && mouseMove && ctx.isPointInPath(mousePosition.x*2, mousePosition.y*2)){ //如果是鼠标移动的到柱状图上，重新绘制图表
ctx.fillStyle = "rgba(46,199,201,1)";
//是否绘制提示
ifTip = true;
tipArr = dataArr[i];
}else{
ctx.fillStyle = "rgba(46,199,201,0.5)";
}
ctx.fill(); } //绘制平均值线
drawAverageLine();
//绘制提示
ifTip && drawTips(mousePosition.x*2, mousePosition.y*2,tipArr[0],tipArr[1]); if(ctr<numctr){
ctr++;
setTimeout(function(){
ctx.clearRect(0,0,canvas.width, canvas.height);
drawLineLabelMarkers();
drawChartAnimate();
}, speed*=1.08);
}
} //绘制平均值线
function drawAverageLine(){
ctx.beginPath();
var yNb = originY-cHeight*(yAverage-minYValue)/(maxYValue-minYValue);
var xNb = originX+cWidth*ctr/numctr+cMargin/2;
ctx.moveTo(originX+2,yNb);
ctx.lineTo(xNb,yNb); //设置虚线
ctx.save();
ctx.lineWidth = 4;
ctx.strokeStyle = ctx.fillStyle = "#2ec7c9";
ctx.setLineDash([10]);
ctx.stroke(); //绘制三角
ctx.beginPath();
ctx.moveTo(xNb,yNb);
ctx.lineTo(xNb-5,yNb-8);
ctx.lineTo(xNb+12,yNb);
ctx.lineTo(xNb-5,yNb+8);
ctx.fill(); //绘制文本
ctx.font = "24px Arial";
ctx.fillText(yAverage, xNb-10,yNb-10);
//还原
ctx.restore();
} //绘制提示框
function drawTips(oX,oY,xVal,yVal){
ctx.save();
ctx.beginPath();
ctx.fillStyle = "rgba(0,0,0,0.5)";
var H = 100;
roundedRect(ctx,oX+10,oY-H/2,2*H,H,5); ctx.fillStyle = "#fff";
ctx.fillText(textArr[1]+"："+yVal, oX+H,oY-H/10);
ctx.fillText(textArr[0]+"："+xVal, oX+H,oY+H/4);
ctx.restore();
} //绘制圆角矩形的方法
function roundedRect(ctx,x,y,width,height,radius){
ctx.moveTo(x,x+radius);
ctx.beginPath();
ctx.lineTo(x,y+height-radius);
ctx.quadraticCurveTo(x,y+height,x+radius,y+height);
ctx.lineTo(x+width-radius, y+height);
ctx.quadraticCurveTo(x+width,y+height,x+width,y+height-radius);
ctx.lineTo(x+width,y+radius);
ctx.quadraticCurveTo(x+width,y,x+width-radius,y);
ctx.lineTo(x+radius,y);
ctx.quadraticCurveTo(x,y,x,y+radius);
ctx.closePath();
ctx.fill();
} } var dataArr = [[174.0, 65.6], [175.3, 71.8], [193.5, 80.7], [186.5, 72.6], [187.2, 78.8],
[181.5, 74.8], [184.0, 86.4], [184.5, 78.4], [175.0, 62.0], [184.0, 81.6],
[180.0, 76.6], [177.8, 83.6], [192.0, 90.0], [176.0, 74.6], [174.0, 71.0],
[184.0, 79.6], [192.7, 93.8], [171.5, 70.0], [173.0, 72.4], [176.0, 85.9],
[176.0, 78.8], [180.5, 77.8], [172.7, 66.2], [176.0, 86.4], [173.5, 81.8],
[178.0, 89.6], [180.3, 82.8], [180.3, 76.4], [164.5, 63.2], [173.0, 60.9],
[183.5, 74.8], [175.5, 70.0], [188.0, 72.4], [189.2, 84.1], [172.8, 69.1],
[170.0, 59.5], [182.0, 67.2], [170.0, 61.3], [177.8, 68.6], [184.2, 80.1],
[186.7, 87.8], [171.4, 84.7], [172.7, 73.4], [175.3, 72.1], [180.3, 82.6],
[182.9, 88.7], [188.0, 84.1], [177.2, 94.1], [172.1, 74.9], [167.0, 59.1],
[169.5, 75.6], [174.0, 86.2], [172.7, 75.3], [182.2, 87.1], [164.1, 55.2],
[163.0, 57.0], [171.5, 61.4], [184.2, 76.8], [174.0, 86.8], [174.0, 72.2],
[177.0, 71.6], [186.0, 84.8], [167.0, 68.2], [171.8, 66.1], [182.0, 72.0],
[167.0, 64.6], [177.8, 74.8], [164.5, 70.0], [192.0, 101.6], [175.5, 63.2],
[171.2, 79.1], [181.6, 78.9], [167.4, 67.7], [181.1, 66.0], [177.0, 68.2],
[174.5, 63.9], [177.5, 72.0], [170.5, 56.8], [182.4, 74.5], [197.1, 90.9],
[180.1, 93.0], [175.5, 80.9], [180.6, 72.7], [184.4, 68.0], [175.5, 70.9],
[180.6, 72.5], [177.0, 72.5], [177.1, 83.4], [181.6, 75.5], [176.5, 73.0],
[175.0, 70.2], [174.0, 73.4], [165.1, 70.5], [177.0, 68.9], [192.0, 102.3],
[176.5, 68.4], [169.4, 65.9], [182.1, 75.7], [179.8, 84.5], [175.3, 87.7],
[184.9, 86.4], [177.3, 73.2], [167.4, 53.9], [178.1, 72.0], [168.9, 55.5],
[157.2, 58.4], [180.3, 83.2], [170.2, 72.7], [177.8, 64.1], [172.7, 72.3],
[165.1, 65.0], [186.7, 86.4], [165.1, 65.0], [174.0, 88.6], [175.3, 84.1],
[185.4, 66.8], [177.8, 75.5], [180.3, 93.2], [180.3, 82.7], [177.8, 58.0],
[177.8, 79.5], [177.8, 78.6], [177.8, 71.8], [177.8, 116.4], [163.8, 72.2],
[188.0, 83.6], [198.1, 85.5], [175.3, 90.9], [166.4, 85.9], [190.5, 89.1],
[166.4, 75.0], [177.8, 77.7], [179.7, 86.4], [172.7, 90.9], [190.5, 73.6],
[185.4, 76.4], [168.9, 69.1], [167.6, 84.5], [175.3, 64.5], [170.2, 69.1],
[190.5, 108.6], [177.8, 86.4], [190.5, 80.9], [177.8, 87.7], [184.2, 94.5],
[176.5, 80.2], [177.8, 72.0], [180.3, 71.4], [171.4, 72.7], [172.7, 84.1],
[172.7, 76.8], [177.8, 63.6], [177.8, 80.9], [182.9, 80.9], [170.2, 85.5],
[167.6, 68.6], [175.3, 67.7], [165.1, 66.4], [185.4, 102.3], [181.6, 70.5],
[172.7, 95.9], [190.5, 84.1], [179.1, 87.3], [175.3, 71.8], [170.2, 65.9],
[193.0, 95.9], [171.4, 91.4], [177.8, 81.8], [177.8, 96.8], [167.6, 69.1],
[167.6, 82.7], [180.3, 75.5], [182.9, 79.5], [176.5, 73.6], [186.7, 91.8],
[188.0, 84.1], [188.0, 85.9], [177.8, 81.8], [174.0, 82.5], [177.8, 80.5],
[171.4, 70.0], [185.4, 81.8], [185.4, 84.1], [188.0, 90.5], [188.0, 91.4],
[182.9, 89.1], [176.5, 85.0], [175.3, 69.1], [175.3, 73.6], [188.0, 80.5],
[188.0, 82.7], [175.3, 86.4], [170.5, 67.7], [179.1, 92.7], [177.8, 93.6],
[175.3, 70.9], [182.9, 75.0], [170.8, 93.2], [188.0, 93.2], [180.3, 77.7],
[177.8, 61.4], [185.4, 94.1], [168.9, 75.0], [185.4, 83.6], [180.3, 85.5],
[174.0, 73.9], [167.6, 66.8], [182.9, 87.3], [160.0, 72.3], [180.3, 88.6],
[167.6, 75.5], [186.7, 101.4], [175.3, 91.1], [175.3, 67.3], [175.9, 77.7],
[175.3, 81.8], [179.1, 75.5], [181.6, 84.5], [177.8, 76.6], [182.9, 85.0],
[177.8, 102.5], [184.2, 77.3], [179.1, 71.8], [176.5, 87.9], [188.0, 94.3],
[174.0, 70.9], [167.6, 64.5], [170.2, 77.3], [167.6, 72.3], [188.0, 87.3],
[174.0, 80.0], [176.5, 82.3], [180.3, 73.6], [167.6, 74.1], [188.0, 85.9],
[180.3, 73.2], [167.6, 76.3], [183.0, 65.9], [183.0, 90.9], [179.1, 89.1],
[170.2, 62.3], [177.8, 82.7], [179.1, 79.1], [190.5, 98.2], [177.8, 84.1],
[180.3, 83.2], [180.3, 83.2]
]; /*
* 参数1 ：需要显示canvas的dom (非canvas标签，需要指定height和width)
* 参数2：二维数据 [0]横轴 [1]纵轴
* 参数3：横轴名称 纵轴名称
* */
goChart(document.getElementById("chart"),dataArr,["身 高","体 重"]) </script>
</body>
</html>
好了，今天就讲到这里，希望大家把代码都自己敲一遍。
关注公众号，博客更新即可收到推送
