canvas 画折线图方法

2024-08-28 06:18
文章标签 方法 canvas 折线图

本文主要是介绍canvas 画折线图方法,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!



function creatCanvas(){//需要传入的数据var data = [80,92,104,110,68,50,45];//需要传入的x坐标var time =["11","1.1","13.1","14.1","15.1","16.1","17.1"];// 获取上下文var a_canvas = document.getElementById('a_canvas');var context = a_canvas.getContext("2d");// 描绘边框var grid_cols = data.length + 1;var grid_rows = 4;var cell_height =(a_canvas.height-50)/ grid_rows;var cell_width = a_canvas.width / grid_cols;context.lineWidth = 1;context.strokeStyle = "#a0a0a0";context.beginPath();context.moveTo(0,0);// 准备画横线var y = grid_rows*cell_height;context.moveTo(0,y);context.lineTo(a_canvas.width, y);context.moveTo(1,0);context.lineTo(1,a_canvas.height-50);context.lineWidth = 2;context.strokeStyle = "#c0c0c0";context.stroke();var max_v = 0;for(var i = 0; i<data.length; i++){if (data[i] > max_v) { max_v = data[i]};}max_v = max_v * 1.1;// 将数据换算为坐标var points = [];for( var i=0; i < data.length; i++){var v= data[i];var px = cell_width * (i+1);var py = (a_canvas.height-50) - (a_canvas.height-50)*(v / max_v);points.push({"x":px,"y":py});}// 绘制折线context.beginPath();context.moveTo(points[0].x, points[0].y);for(var i= 1; i< points.length; i++){context.lineTo(points[i].x,points[i].y);}context.lineWidth = 2;context.strokeStyle = "#ee0000";context.stroke();//绘制坐标图形for(var i in points){var p = points[i];context.beginPath();context.arc(p.x,p.y,4,0,2*Math.PI);context.fillStyle = "#ee0000";context.fill();}//画x轴for(var i in points){var p = points[i];context.beginPath();context.arc(p.x,y,2,0,2*Math.PI);context.fillStyle = "#ee0000";context.fill();context.beginPath();context.font = 'thick 6px arial';context.fillStyle = "green";context.fillText(time[i], p.x-time[i].length*3, y+15);}context.beginPath();context.font = 'thick 10px arial';context.fillStyle = "green";context.fillText("y轴", 0, 10);//}


这篇关于canvas 画折线图方法的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1113964

相关文章

vue基于ElementUI动态设置表格高度的3种方法

《vue基于ElementUI动态设置表格高度的3种方法》ElementUI+vue动态设置表格高度的几种方法,抛砖引玉,还有其它方法动态设置表格高度,大家可以开动脑筋... 方法一、css + js的形式这个方法需要在表格外层设置一个div,原理是将表格的高度设置成外层div的高度,所以外层的div需要

Python判断for循环最后一次的6种方法

《Python判断for循环最后一次的6种方法》在Python中,通常我们不会直接判断for循环是否正在执行最后一次迭代,因为Python的for循环是基于可迭代对象的,它不知道也不关心迭代的内部状态... 目录1.使用enuhttp://www.chinasem.cnmerate()和len()来判断for

Java循环创建对象内存溢出的解决方法

《Java循环创建对象内存溢出的解决方法》在Java中,如果在循环中不当地创建大量对象而不及时释放内存,很容易导致内存溢出(OutOfMemoryError),所以本文给大家介绍了Java循环创建对象... 目录问题1. 解决方案2. 示例代码2.1 原始版本(可能导致内存溢出)2.2 修改后的版本问题在

四种Flutter子页面向父组件传递数据的方法介绍

《四种Flutter子页面向父组件传递数据的方法介绍》在Flutter中,如果父组件需要调用子组件的方法,可以通过常用的四种方式实现,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录方法 1:使用 GlobalKey 和 State 调用子组件方法方法 2:通过回调函数(Callb

一文详解Python中数据清洗与处理的常用方法

《一文详解Python中数据清洗与处理的常用方法》在数据处理与分析过程中,缺失值、重复值、异常值等问题是常见的挑战,本文总结了多种数据清洗与处理方法,文中的示例代码简洁易懂,有需要的小伙伴可以参考下... 目录缺失值处理重复值处理异常值处理数据类型转换文本清洗数据分组统计数据分箱数据标准化在数据处理与分析过

Java中Object类的常用方法小结

《Java中Object类的常用方法小结》JavaObject类是所有类的父类,位于java.lang包中,本文为大家整理了一些Object类的常用方法,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1. public boolean equals(Object obj)2. public int ha

golang1.23版本之前 Timer Reset方法无法正确使用

《golang1.23版本之前TimerReset方法无法正确使用》在Go1.23之前,使用`time.Reset`函数时需要先调用`Stop`并明确从timer的channel中抽取出东西,以避... 目录golang1.23 之前 Reset ​到底有什么问题golang1.23 之前到底应该如何正确的

Vue项目中Element UI组件未注册的问题原因及解决方法

《Vue项目中ElementUI组件未注册的问题原因及解决方法》在Vue项目中使用ElementUI组件库时,开发者可能会遇到一些常见问题,例如组件未正确注册导致的警告或错误,本文将详细探讨这些问题... 目录引言一、问题背景1.1 错误信息分析1.2 问题原因二、解决方法2.1 全局引入 Element

Python调用另一个py文件并传递参数常见的方法及其应用场景

《Python调用另一个py文件并传递参数常见的方法及其应用场景》:本文主要介绍在Python中调用另一个py文件并传递参数的几种常见方法,包括使用import语句、exec函数、subproce... 目录前言1. 使用import语句1.1 基本用法1.2 导入特定函数1.3 处理文件路径2. 使用ex

Oracle查询优化之高效实现仅查询前10条记录的方法与实践

《Oracle查询优化之高效实现仅查询前10条记录的方法与实践》:本文主要介绍Oracle查询优化之高效实现仅查询前10条记录的相关资料,包括使用ROWNUM、ROW_NUMBER()函数、FET... 目录1. 使用 ROWNUM 查询2. 使用 ROW_NUMBER() 函数3. 使用 FETCH FI