HTML5 Canvas 绘制库存变化折线 计算出库存周转率
2024-05-13 10:14:18
<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head><title>最低库存量/最高库存量计算</title></head><body onload="draw()"><canvas id="myCanvus" width="1240px" height="240px" style="border:1px dashed black;">出现文字表示你的浏览器不支持HTML5</canvas></body>
</html>
<script type="text/javascript">
<!--
function draw(){var canvas=document.getElementById("myCanvus");var canvasWidth=1240;var canvasHeight=240;var context=canvas.getContext("2d");context.fillStyle = "white";context.fillRect(0, 0, canvasWidth, canvasHeight);context.strokeStyle = "black";context.fillStyle = "black";context.save();// 进行坐标变换：把原点放在左下角，东方为X轴正向，北方为Y轴正向var offset=20;// 偏移值，用来画坐标轴
context.save();context.translate(0+offset,canvasHeight-offset);context.rotate(getRad(180));context.scale(-1,1); drawAxisX(context,canvasWidth-40);drawAxisY(context);// 出库数据,这是主动数据var outbounds=[0,70,0,70,0,60,0,60,0,70,0,70,0,70,0,70,0,70,0,70,0,70,0,70,];var daysales=0;// 日销售量var sum=0;// 日销售量=出库数据均值for(var i=0;i<outbounds.length;i++){sum+=outbounds[i];}daysales=sum/outbounds.length;
console.log("日销售量="+daysales);// 零件对象，固有属性数据var piece=new Object();piece.actualStock=100;// 当前实际库存量，单位个
piece.leadtime=1;// 到货天数，单位天
piece.safeday=0.5;// 安全系数，单位天
piece.supplyGap=2;//供应间隔日数，单位天
piece.reorganizeDay=2;//整理准备日数，单位天// 最低库存量var minStorage=daysales*(piece.leadtime+piece.safeday);console.log("最低库存量="+minStorage);// 最高库存量var maxStorage=daysales*(piece.supplyGap+piece.reorganizeDay+piece.safeday);console.log("最高库存量="+maxStorage);// 入库数据,这是被动数据var inbounds=[50,0,50,0,50,0,50,0,50,0,90,0,90,0,90,0,90,0,40,0,60,0,70,0,];drawStockCurve(context,piece.actualStock,inbounds,outbounds,minStorage,maxStorage);drawBounds(context,minStorage,maxStorage,canvasWidth-40);context.restore();context.fillText("每日库存变化折线,红点意味着低于安全库存，黄点意味着超储",400,50);// 计算库存周转率var outTotal=0;// 出库总金额// 出库总金额=出库量累计for(var i=0;i<outbounds.length;i++){outTotal+=outbounds[i];}console.log("出库总金额="+outTotal);// 总库存金额var inStock=piece.actualStock;sum=0;for(var i=0;i<inbounds.length;i++){inStock=inStock+inbounds[i]-outbounds[i];sum+=inStock;}console.log("inStock="+inStock);var inAvg=sum/inbounds.length;// 平均库存量/平均库存金额
console.log("平均库存金额="+inAvg);var storageRate=outTotal/inAvg*100;
console.log("库存周转率="+storageRate);context.fillText("库存周转率="+toCurrency(""+storageRate+"")+"%",1000,40);context.fillText("库存",10,20);context.fillText("日期",1200,235);
}function drawBounds(ctx,minStorage,maxStorage,axisLength){ctx.save();ctx.lineWidth=0.5;ctx.strokeStyle='red';// 画underage
ctx.beginPath();ctx.moveTo(0, minStorage);ctx.lineTo(axisLength, minStorage);ctx.stroke();ctx.closePath();ctx.save();ctx.translate(-10,minStorage);ctx.rotate(getRad(180));ctx.scale(-1,1);ctx.fillText("告罄",0,0);ctx.restore();ctx.restore();ctx.save();ctx.lineWidth=0.5;ctx.strokeStyle='red';// 画underage
ctx.beginPath();ctx.moveTo(0, maxStorage);ctx.lineTo(axisLength, maxStorage);ctx.stroke();ctx.closePath();ctx.save();ctx.translate(-10,maxStorage);ctx.rotate(getRad(180));ctx.scale(-1,1);ctx.fillText("超储",0,0);ctx.restore();ctx.restore();
}function drawStockCurve(ctx,actualStock,inbounds,outbounds,minStorage,maxStorage){ctx.save();ctx.lineWidth=1;ctx.strokeStyle='black';ctx.fillStyle='black';var y=actualStock;var x;ctx.beginPath();for(var i=0;i<inbounds.length;i++){y=y+inbounds[i]-outbounds[i];x=i*50;ctx.lineTo(x, y);ctx.save();// 因坐标变换会导致文字错位，故采用位移+旋转+缩放的方式恢复
ctx.translate(x,y);ctx.rotate(getRad(180));ctx.scale(-1,1);ctx.fillText("("+i+","+y+")",0,0);ctx.restore();}ctx.stroke();ctx.closePath();// 2
y=actualStock;x=0;for(var i=0;i<inbounds.length;i++){y=y+inbounds[i]-outbounds[i];x=i*50;ctx.lineTo(x, y);if(y>maxStorage){ctx.beginPath();ctx.strokeStyle='yellow';ctx.arc(x,y,5,0,Math.PI*2,false);ctx.stroke();ctx.closePath();}if(y<minStorage){ctx.beginPath();ctx.strokeStyle='red';ctx.arc(x,y,3,0,Math.PI*2,false);ctx.stroke();ctx.closePath();}}ctx.restore();
}function drawAxisX(ctx,axisLength){ctx.save();ctx.lineWidth=0.5;ctx.strokeStyle='navy';ctx.fillStyle='navy';// 画轴
ctx.beginPath();ctx.moveTo(0, 0);ctx.lineTo(axisLength, 0);ctx.stroke();ctx.closePath();ctx.beginPath();ctx.moveTo(axisLength-Math.cos(getRad(15))*10, Math.sin(getRad(15))*10);ctx.lineTo(axisLength, 0);ctx.lineTo(axisLength-Math.cos(getRad(15))*10, -Math.sin(getRad(15))*10);ctx.stroke();ctx.closePath();// 画刻度var x,y;y=5;for(x=50;x<axisLength;x+=50){ctx.beginPath();ctx.moveTo(x, 0);ctx.lineTo(x, y);ctx.stroke();ctx.closePath();}// 写文字var i=0;for(x=0;x<axisLength;x+=50){ctx.save();ctx.scale(1,-1);ctx.fillText(i,x,y+10);ctx.restore();i++;}ctx.restore();
}function drawAxisY(ctx){ctx.save();ctx.lineWidth=0.5;ctx.strokeStyle='navy';ctx.fillStyle='navy';// 画轴
ctx.beginPath();ctx.moveTo(0, 0);ctx.lineTo(0, 200);ctx.stroke();ctx.closePath();ctx.beginPath();ctx.moveTo(Math.sin(getRad(15))*10, 200-Math.cos(getRad(15))*10);ctx.lineTo(0, 200);ctx.lineTo(-Math.sin(getRad(15))*10, 200-Math.cos(getRad(15))*10);ctx.stroke();ctx.closePath();// 画刻度var x,y;x=5;for(y=50;y<200;y+=50){ctx.beginPath();ctx.moveTo(x, y);ctx.lineTo(0, y);ctx.stroke();ctx.closePath();}// 写文字
x=-19;for(y=50;y<200;y+=50){ctx.save();ctx.scale(1,-1);ctx.translate(0,-200);ctx.fillText(200-y,x,y);ctx.restore();}ctx.restore();
}function getRad(degree){return degree/180*Math.PI;
}function toCurrency(money) { if (/[^0-9\.]/.test(money)){return '0.00';}money = money.replace(/^(\d*)$/, "$1.");money = (money + "00").replace(/(\d*\.\d\d)\d*/, "$1");money = money.replace(".", ",");var re = /(\d)(\d{3},)/;while (re.test(money)) {money = money.replace(re, "$1,$2");}money = money.replace(/,(\d\d)$/, ".$1");return '' + money.replace(/^\./, "0.")+" ";
}
//-->
</script>HTML5 Canvas 绘制库存变化折线 计算出库存周转率相关推荐
- HTML5 Canvas 绘制库存变化折线 增加超储告罄线
<!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type&quo ...
- h5的横线_使用HTML5 Canvas绘制直线或折线等线条的方法讲解
HTML5 Canvas基本概念讲解html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏 ...
- 使用 HTML5 Canvas 绘制出惊艳的水滴效果
HTML5 在不久前正式成为推荐标准,标志着全新的 Web 时代已经来临.在众多 HTML5 特性中,Canvas 元素用于在网页上绘制图形,该元素标签强大之处在于可以直接在 HTML 上进行图形操作 ...
- 在html画一个自动缩放圆环,使用html5 canvas绘制圆环动效
最近笔者有个需求,需求内容为:一组文字显示在圆环的周围,用户可添加文字,文字围绕着圆环,每个词对应圆环周围的的蓝色小圆点,当用户鼠标放在圆环上方小蓝点时时,实现放射出三角形,再显示出文字,先看看动图效 ...
- HTML5 canvas绘制雪花飘落动画（需求分析、知识点、程序编写分布详解）
HTML5 canvas绘制雪花飘落动画(需求分析.知识点.程序编写分布详解) 原文:HTML5 canvas绘制雪花飘落动画(需求分析.知识点.程序编写分布详解) 看到网上很多展示html5雪花飞动 ...
- html5 Canvas 绘制基本图形 从直线图形到使用路径 - 直线、矩形、路径、多边形、复杂组合图形
html5: Canvas 绘制基本图形 从绘制直线 到 路径 Jack Lee 的 CSDN 博客 邮箱 :291148484@163.com CSDN 主页:https://blog.csdn.n ...
- html5 canvas绘制图形,html5 Canvas绘制图形入门详解
html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...
- HTML5 canvas绘制太阳系各行星(包括月球的公转)
HTML5 canvas绘制太阳系 看了好多canvas绘制太阳系行星,他们都忽略了月亮,虽然月亮不是行星,但是绘图少了月亮也就没有挑战性了,今天我就计算了一下月亮的轨迹,然后按照公转的比例画了上 ...
- html5时间画布走动,javascript+HTML5 canvas绘制时钟功能示例
本文实例讲述了javascript+HTML5 canvas绘制时钟功能.分享给大家供大家参考,具体如下: 效果如下: 代码: www.jb51.net canvas绘制时钟 div{text-ali ...
最新文章
- JDK 13 新特性一览
- 一禁了之还是放开应用？面部识别“人红是非多”
- c#的Marshal
- linux开发操作系统,Linux 操作系统应用与开发
- 面试： 14 个实用的数据库设计技巧，一次性教给你！
- [react-router] React-Router怎么获取历史对象？
- python nlp_Python NLP入门教程
- 数据结构Java版之基数排序（四）
- 用spss做哑变量--给不敲代码同学福音
- redis 分布式锁流程图
- java spark yarn_java – 是否可以从代码中运行spark yarn cluster？
- html 设置字体加粗,css如何设置字体加粗样式？
- 杨帅浙江大学计算机,诚邀校友见证杭州校友会注册成立（非活动帖）
- 【转】CC2530/2531/2533对比
- 华三模拟器中的remote实现简单组网
- 出国旅游也能用微信买单了
- 网站可行性报告范文_嵩县写可行性研究报告项目报告范文
- 边缘计算的100个术语
- 2020-10-7 CCNA学习笔记
- C#中使用Invalidate()与MouseMove方法刷新控件时，控件闪烁问题解决方法