canvas绘制折线图(仿echarts)
遇到的问题：Retina屏上字体线条模糊问题
解决方案：放大canvas的大小，然后用css压缩回原大小，例如：想要900*400的画布，先将画布设置为 width="1800px" height="800px"，再用css {width: 900px;height: 400px;}压缩。
最终效果如下图：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>echarts绘制</title>
</head>
<body>
<canvas id="canvas" width="1800px" height="800px" style="border: 1px solid #ebebed;width: 900px;height: 400px;"></canvas>
<script>
var scale = 2;
var canvas = document.getElementById('canvas');
var config = {
width: canvas.width,
height: canvas.height,
Left: 70,
Top: 90,
Right: 30,
Bottom: 60,
color: ["#5266d7"],
yLine:{
splitcount: 8,
data:[0,100,200,300,400,500,600,700,800]
},
xLine:{
splitcount: 9,
data:[1,2,3,4,5,6,7,8,9,10]
},
series:{
data:[0, 532, 555, 700, 500, 800, 300, 270, 358, 160, 453, 577, 639, 758, 233, 299, 120, 188, 158, 176, 333, 257, 120, 199, 573, 430, 111, 300, 700, 80, 50, 30, 40, 10, 22, 37, 77, 100, 240, 183, 143, 377, 133, 445, 345, 321, 111,12,3,34,456,235,214,43,21]
}
}
var ctx = canvas.getContext('2d');
// 绘制title
drawText('单位: 次', config.Left, config.Top - 30, 'normal 22px Arial', '#a3a2a7');
// 绘制网格线
darwBackLine('#cccccc', config.yLine.splitcount, 1, config.yLine.data);
// 绘制x轴
drawXLine('#939099', config.xLine.splitcount, 2, config.xLine.data);
// 绘制线条
drawLines(config.color[0], 2,config.series.data);
// 绘制图例
drawItem('test', config.color[0], 2); function darwBackLine(color, splitcount, linewidth, data) {
var len = Math.floor((config.height - config.Top - config.Bottom)/splitcount);
var start = config.Top;
for (var i = 0; i < splitcount; i++) {
var point = start+len*i;
drawLine(config.Left, point, (config.width/2 - config.Right)*scale, point, color, linewidth);
drawText(data[splitcount-i], 10, point, 'normal 22px Arial', '#605d68');
}
drawText(data[splitcount-i], 10, point+len, 'normal 22px Arial', '#605d68');
} function drawXLine(color, splitcount, linewidth, data) {
var left = config.Left;
var top = config.height - config.Bottom;
var right = (config.width/2 - config.Right)*scale;
drawLine(config.Left, top, right, top, color, linewidth);
var len = (right - left)/splitcount; for (var i = 0; i < splitcount+1; i++) {
var xpoint = left+len*i;
drawLine(xpoint,top+linewidth,xpoint, top-5*scale, color, linewidth);
var PanningLeft = data[i].toString().length*5;
drawText(data[i], xpoint-PanningLeft, top+15*scale, 'normal 22px Arial', '#605d68')
}
} function drawLines(color, linewidth, data) {
var count = data.length;
var left = config.Left;
var top = config.height - config.Bottom;
var right = (config.width/2 - config.Right)*scale;
var len = (right - left)/(count - 1);
var i = 0; var interval = setInterval(function() {
if(i >= count - 1){
clearInterval(interval);
return;
}
drawLine(left+len*i, top-(data[i]/800)*(top - config.Top), left+len*(i+1), top-(data[i+1]/800)*(top - config.Top), color, linewidth, 'bevel');
i++;
}, 30);
} function drawItem(text, color, linewidth) {
var right = (config.width/2 - config.Right)*scale;
var left = right-(text.length*10);
drawText(text, left, config.Top - 10, 'normal 22px Arial', '#605d68');
drawLine(left-20, config.Top - 15, left-80, config.Top - 15, color, linewidth);
} function drawLine(startX, startY, endX, endY, color, width, lineJoin) {
ctx.beginPath();
ctx.moveTo(startX, startY);
ctx.lineTo(endX, endY);
if(color){
ctx.strokeStyle = color
} if(width){
ctx.lineWidth = width*scale;
} if(lineJoin){
ctx.lineJoin = lineJoin;
} ctx.closePath();
ctx.stroke();
} function drawText(text, x, y, font, color) {
ctx.font= font;
ctx.fillStyle= color;
ctx.fillText(text, x, y);
}
</script>
</body>
</html>
canvas绘制折线图(仿echarts)的更多相关文章
- 用canvas绘制折线图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Android自己定义组件系列【9】——Canvas绘制折线图
有时候我们在项目中会遇到使用折线图等图形,Android的开源项目中为我们提供了非常多插件,可是非常多时候我们须要依据详细项目自己定义这些图表,这一篇文章我们一起来看看怎样在Android中使用Can ...
- Android自定义控件 -Canvas绘制折线图(实现动态报表效果)
有时候我们在项目中会遇到使用折线图等图形,Android的开源项目中为我们提供了很多插件,但是很多时候我们需要根据具体项目自定义这些图表,这一篇文章我们一起来看看如何在Android中使用Canvas ...
- Android自定义组件系列【9】——Canvas绘制折线图
有时候我们在项目中会遇到使用折线图等图形,Android的开源项目中为我们提供了很多插件,但是很多时候我们需要根据具体项目自定义这些图表,这一篇文章我们一起来看看如何在Android中使用Canvas ...
- canvas绘制折线图
效果图: 重难点: 1.画布左上角的顶点的坐标为(0 ,0),右下角的坐标最大,与平常思维相反 2.数据的处理 html代码: <!DOCTYPE html><html lang=& ...
- 【带着canvas去流浪】（2）绘制折线图
目录 一. 任务说明 二. 重点提示 三. 示例代码 3.1 一般折线图 3.2 用贝塞尔曲线绘制平滑折线图 四. 大数据量场景 示例代码托管在:https://github.com/dashnowo ...
- 带着canvas去流浪系列之二 绘制折线图
[摘要] 用canvasAPI实现echarts简易图表 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 任务说明 使用原生canvasAPI绘制 ...
- 【Canvas】(2)---绘制折线图
绘制折线图 之前在工作的时候,用过百度的ECharts绘制折线图,上手很简单,这里通过canvas绘制一个简单的折线图.这里将一整个绘制过程分为几个步骤: 1.绘制网格 2.绘制坐标系 3.绘制点 4 ...
- html5绘制折线图
html5绘制折线图详细代码 <html> <canvas id="a_canvas" width="1000" height="7 ...
随机推荐
- 润乾V4报表批量打印
背景说明 在应用中,经常遇到,批量打印的需求,批量打印,顾名思义,就是点击一次打印按钮,能打印多张报表. 下面,我们来介绍一下怎么样实现批量打印的 应用举例: Jsp代码 <% //rep ...
- STL中set和map
set 可以认为是数学上的集合,集合中的元素不允许有重复.set特有的操作是高效的插入.删除和执行基本查找. set的插入方法是 insert,由于集合元素的唯一性,insert操作不一定会成功,in ...
- Vue2学习笔记:v-for指令
1.使用 <!DOCTYPE html> <html> <head> <title></title> <meta charset=&q ...
- MySQL binlog格式解析
MySQL binlog格式解析 binlog想必大家都不陌生,在主从复制或者某些情况下的数据恢复会用到.由于binlog是二进制数据,要查看一般都借助mysqlbinlog工具.这篇笔记分析了b ...
- [翻译] GoogleMaterialDesignIcons
GoogleMaterialDesignIcons Google Material Design Icons Font for iOS GMD图片样式的字体,用于iOS开发. It is based ...
- 裸机恢复 (BMR) 和系统状态恢复
DPM 将系统保护数据源视为两个组成部分 – 裸机恢复 (BMR) 和系统状态保护. BMR 涉及保护操作系统文件和重要卷上的所有数据,用户数据除外. 系统状态保护涉及保护操作系统文件. DPM 使用 ...
- svn检出项目，Project *** is already imported into workspace
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16.如果从svn检出的项目 Import ---- Existing Maven Pro ...
- Mac Item2 设置别名 永久生效
使用 Item2 终端, 设置 别名的时候, 按照 网上的说法, 是 去 修改 用户目录下的 .bashrc 或者 .bash_profile 这两个文件都可以, 把 alias 写在 这两 ...
- 阿里八八Alapa事后诸葛亮
设想和目标 1.我们的软件要解决什么问题?是否定义的很清楚?是否对典型用户和典型场景有清晰的描述? 我们的项目希望解决用户对于时间.日程管理上不够方便.直观.易丢失的问题,因为并不是新颖高端的概念,因 ...
- C++ 课堂作业1.0
c++第一次课堂作业点这里 题目要求:输入半径,计算圆的面积,在调用外部函数,无需使用类.