使用canvas实现数据可视化

最新推荐文章于 2024-04-15 10:30:41 发布
最新推荐文章于 2024-04-15 10:30:41 发布
阅读量1.1k 收藏 2
点赞数 1
文章标签： json 前端 数据库 ViewUI
原文链接：http://www.cnblogs.com/yayazhang/p/6041274.html
版权

使用canvas实现数据可视化

绘制折线图

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
    canvas {
        border: 1px solid red;
    }
</style>
</head>
<body>
<canvas id="cas" width="600" height="300"></canvas>
</body>
<script>
var cas=document.getElementById("cas");
var context=cas.getContext('2d');

var points=[
    {x:2,y:97},
    {x:18,y:27},
    {x:21,y:62},
    {x:28,y:44},
    {x:44,y:83},
    {x:61,y:88},
    {x:72,y:45},
    {x:78,y:72},
    {x:84,y:53},
    {x:90,y:42}
];
//定义变量
var leftOffset=20,
        rightOffset=20,
        topOffset=20,
        bottomOffset=20;

//箭头大小
var arrowHeight=20,
        arrowWidth=10;

//坐标轴原点
var x=leftOffset;
var y=cas.height-bottomOffset;

//绘制坐标轴
context.beginPath();
//绘制x轴
context.moveTo(x,y);
context.lineTo(cas.width-rightOffset,y);
//绘制y轴
context.moveTo(x,y);
context.lineTo(x,topOffset);
context.stroke();

//绘制箭头
context.beginPath();
//绘制x轴箭头
context.moveTo(cas.width-rightOffset,y);
context.lineTo(cas.width-rightOffset-arrowHeight,y-arrowWidth/2);
context.lineTo(cas.width-rightOffset-arrowHeight/2,y);
context.lineTo(cas.width-rightOffset-arrowHeight,y+arrowWidth/2);
context.closePath();

//绘制y轴箭头
context.moveTo(x,topOffset);
context.lineTo(x-arrowWidth/2,topOffset+arrowHeight);
context.lineTo(x,topOffset+arrowHeight/2);
context.lineTo(x+arrowWidth/2,topOffset+arrowHeight);
context.closePath();
context.fill();

//绘制点
context.beginPath();
//范围
var rangeWidth=cas.width-leftOffset-rightOffset-arrowHeight;
var rangeHeight=cas.height-topOffset-bottomOffset-arrowHeight;

var maxX=Math.max.apply(null,points.map(function(v){
            return v.x;
        }
));
var maxY=Math.max.apply(null,points.map(function(v){
            return v.y;
        }
));
//比例
var rateX=rangeWidth/maxX;
var rateY=rangeHeight/maxY;

for(var i=0;i<points.length;i++){
    var pointx=x+points[i].x*rateX;
    var pointY=y-points[i].y*rateY;

    context.moveTo(pointx-4,pointY-4);
    context.lineTo(pointx+4,pointY-4);
    context.lineTo(pointx+4,pointY+4);
    context.lineTo(pointx-4,pointY+4);
    context.closePath();
}
context.fillStyle="red";
context.fill();

//绘制折线
context.beginPath();
context.moveTo(x+points[0].x*rateX,pointY=y-points[0].y*rateY)
for(var i=1;i<points.length;i++){
    var pointx=x+points[i].x*rateX;
    var pointY=y-points[i].y*rateY;
    context.lineTo(pointx,pointY);
}
context.strokeStyle="red";
context.stroke();
//绘制坐标
for(var i=0;i<points.length;i++){
    var pointX = x + points[ i ].x * rateX;
    var pointY = y - points[ i ].y * rateY;
    var text="("+points[i].x+","+points[i].y+")";
    context.fillText(text,pointX,pointY);
}
</script>
</html>

效果图

1.png?raw=true

绘制条形图

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
    canvas {
        border: 1px solid red;
    }
</style>
</head>
<body>
<canvas id="cas" width="600" height="300"></canvas>
</body>
<script>
var cas=document.getElementById("cas");
var context=cas.getContext('2d');

var points=[
    {x:50,y:97},
    {x:100,y:27},
    {x:150,y:62},
    {x:200,y:44},
    {x:250,y:83},
    {x:300,y:88},
    {x:350,y:45},
    {x:400,y:72},
    {x:450,y:53},
    {x:500,y:42}
];
var data=[50,100,150,200,250,300,350,400,450,500];

//定义变量
var leftOffset=20,
    rightOffset=20,
    topOffset=20,
    bottomOffset=20;

//箭头大小
var arrowHeight=20,
    arrowWidth=10;

//坐标轴原点
var x=leftOffset;
var y=cas.height-bottomOffset;

//绘制坐标轴
context.beginPath();
//绘制x轴
context.moveTo(x,y);
context.lineTo(cas.width-rightOffset,y);
//绘制y轴
context.moveTo(x,y);
context.lineTo(x,topOffset);
context.stroke();

//绘制箭头
context.beginPath();
//绘制x轴箭头
context.moveTo(cas.width-rightOffset,y);
context.lineTo(cas.width-rightOffset-arrowHeight,y-arrowWidth/2);
context.lineTo(cas.width-rightOffset-arrowHeight/2,y);
context.lineTo(cas.width-rightOffset-arrowHeight,y+arrowWidth/2);
context.closePath();

//绘制y轴箭头
context.moveTo(x,topOffset);
context.lineTo(x-arrowWidth/2,topOffset+arrowHeight);
context.lineTo(x,topOffset+arrowHeight/2);
context.lineTo(x+arrowWidth/2,topOffset+arrowHeight);
context.closePath();
context.fill();

//绘制点
context.beginPath();
//范围
var rangeHeight=cas.height-topOffset-bottomOffset-arrowHeight;


var maxY=Math.max.apply(null,points.map(function(v){
            return v.y;
        }
));
//比例
var rateY=rangeHeight/maxY;
context.fillStyle="red";
context.fill();
//绘制折线
context.beginPath();
for(var i=0;i<points.length;i++){
    var pointY=y-points[i].y*rateY;

    context.moveTo(points[i].x-6,pointY-6);
    context.lineTo(points[i].x+6,pointY-6);
    context.lineTo(points[i].x+6,y);
    context.lineTo(points[i].x-6,y);
    context.closePath();
    
    context.fillText(points[i].y,points[i].x-6,pointY-8);
}
context.fillStyle="red";
context.fill();

转载于:https://www.cnblogs.com/yayazhang/p/6041274.html

weixin_30500289
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
数据大屏，指挥舱，Vue，ECharts，Canvas
12-17
Vue前端技术结合ECharts及Canvas技术开发出的数据大屏、指挥舱，包含党建，政务，财务三个维度
css3 和 html5 笔记
miyayeeh的博客
06-24 455
1.css3 ie下大部分不兼容 ie9以下 浏览器低版本不兼容 需要写 -webket-transition:1s -moz-transition: 1s -o-transition:1s transition:1s 这些 2.Css3 选择器 --属性选择器(1) E[attr]只使用属性名，但没有确定任何属性值 E[attr=...
Canvas图形编辑器-数据结构与History(undo/redo)
最新发布
WindrunnerMax
04-15 827
本文我们介绍总结了我们的图形编辑器中数据结构的设计以及History模块的实现，虽然暂时不涉及到Canvas本身，但是这都是作为编辑器本身的基础能力，也是通用的能力可以学习。后边我们可以介绍的能力还有很多，例如复制粘贴模块、画布分层、时间管理、无限画布、按需绘制、性能优化、焦点控制、参考线、富文本、快捷键、层级控制、渲染顺序、事件模拟、PDF排版等等，整体来说还是比较有意思的，欢迎关注我并留意后续的文章。
解决网页pdf禁止打印的方案
热门推荐
qq_43606857的博客
12-12 1万+
网页禁止打印pdf解决办法
前端实现在线预览pdf、docx、xls、ppt等文件
u010227042的博客
08-26 7812
思路：前台将各种格式的附件上传到服务器----后台通过方法将这些格式的文件转化成图片，前台通过放映ppt的方式将其展示在页面上。 关键点：reveal.js 参考文章：https://www.awesomes.cn/repo/hakimel/reveal.js 百度文库预览ppt:https://wenku.baidu.com/browse/getbcsurl?doc_id=9c6b472924c52cc58bd63186bceb19e8b8f6ec06&pn=1&rn=99999
分享Canvas画横断面图的vue源码
qq_29407683的博客
01-20 935
<template> <div class="qieMianTu"> <canvas id="canvas" width="900" height="800"></canvas> <div style="border: 1px solid; width: 80px; padding: 5px" class="tuli"> <div :key="key" style="display: flex" v-for=.
数据可视化 Canvas
weixin_56663198的博客
03-07 398
1 邂逅 Canvas 2 Canvas绘制图形 3 Canvas样式和颜色 4 Canvas状态和形变 5 Canvas动画和案例
【数据可视化】数据可视化Canvas
DomCode
06-09 1491
Canvas API（画布）是在HTML5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图（bitmap）。
canvas数据可视化 1.0
u010191806的专栏
04-01 622
第一次学习canvas，记录一下学习内容： 实现json数据的用图表的形式展示，知识点：html5\canvas 【Canvas 通过 JavaScript 来绘制 2D图形】 <html> <head> <meta charset="UTF-8"/> <title>可视化</title> ...
原生canvas绘画自己的可视化图表
qq_41956361的博客
11-20 4627
我们经常使用类似echarts这样的可视化图表，虽然提供给我们的生态已经够完善了，但是缺不能满足我们的自定义和好奇心，现在我们用简单的canvas来绘画柱状图(代码不想优化了建议用面向对象书写) var heightc, widthc; var w = document.getElementById("barChart") var heightc = w.height - 50; var widthc = w.width - 50; var s = document.
数据可视化之canvas（简单了解）
QZ9420的博客
01-03 1186
使用canvas绘制一个三角形 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> .
JS中获取数据库中的值的方法
12-11
实施过程如下：    1、引用Ajax.dll    2、在App_Code写具体的方法，最好单独建立一个类文件，然后写具体方法。       代码如下:public class AjaxMethod www.jb51.net{    public AjaxMethod()    {        //        //TODO: 在此处添加构造函数逻辑        //    }    [Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.Read)]    public static string GetCardMoney(string
用canvas实现可视化波形音乐播放器，canvas音频播放器
03-18
一个 canvas 可视化波形音频播放器。 一直想找个机会写一个播放器的功能，这次终于可以如愿实现了，前后花了几周的时间，主要是自己本身也有工作，也确实有点懒散，写一下放一下，磕磕绊绊的总算是做了自己满意的...
基于Vue3.0的“数据可视化大屏”设计与编辑器源码.zip
06-17
基于Vue3.0的“数据可视化大屏”设计与编辑器源码 使用方法： 1. 下载该项目到本地， 2. 安装依赖 // yarn run install npm run install 3. 运行预览 // yarn run build npm run build 本项目为个人项目, 主要使用 ...
canvas绘制风场效果
03-22
canvas绘制风场，部署到web容器中才能运行，nginx，apache、tomcat都可以，包含封装的风场js和样例风场数据
anichart.js：轻松创建数据可视化动画视频
02-05
轻松地制作数据可视化动画视频。 示例 在线编辑（v2.x） 在线编辑（v1.x） 效果展示 写在前面 开发过程中我认识到架构上的不合理替代，API正在重组中，仅有测试用例，没有项目文档。请谨慎使用。 本项目开源，自由，...
Python 实现的一个将数据库的数据进行可视化显示的图表，使用流行的canvasjs前端组件，带动画，漂亮实用且易集成
06-10
Python 实现的一个将数据库的数据进行可视化显示的图表，使用流行的canvasjs前端组件，漂亮实用且易集成 数据库为sqlite，框架django，前端jquery+canvasjs
html5替代wpf,WPF仿百度Echarts人口迁移图 - 普通的地球人
weixin_42122986的博客
06-18 413
关于大名鼎鼎的百度Echarts我就不多说了 不了解的朋友直接看官方的例子吧前阵子我加入了一个WPF的技术交流群 次demo的完成 首先得感谢群里的上进有为青年 十年 他总能发一些效果 让人看了就忍不住想想自己有没有思路实现 甚至想写写看 于是就有了此demo这个demo写了个什么东西 我先上个图吧 让大家有个直观的印象 录gif的关系 看起来可能有点卡我没用过百度Echart 所以可能和百度Ec...
数据可视化-Canvas
ximingx
05-23 818
Canvas Canvas API 主要聚焦于 2D 图形。当然也可以使用<canvas>元素对象的 WebGL API 来绘制 2D 和 3D 图形，可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理。 Canvas非常适合图像密集型的游戏开发，适合频繁重绘许多的对象。 能够以 .png 或 .jpg 格式保存结果图像，适合对图片进行像素级的处理。 在移动端可以能会因为Canvas数量多，而导致内存占用超出了手机的承受能力，导致浏览器崩溃。 Canvas 是由一个个像素点构成的图形
如何使用Matplotlib实现数据可视化在pygame实现
03-26
要在pygame中使用Matplotlib实现数据可视化，需要按照以下步骤进行操作： 1. 安装Matplotlib库和pygame库： 首先，需要确保已经在Python环境中安装了Matplotlib库和pygame库。可以使用以下命令安装这些库： ``` ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值