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 ...
随机推荐
- redis sortedSet
zset 和set 相比: zset 类型和set类型一样,不允许有重复的元素.zset是有序的,zset 有一个double类型的分数,这个分数可以重复,zset正是通过这个分数对集合中的元素从小到 ...
- 3The superclass “javax.servlet.http.HttpServlet" was not found on the Java Build Path 之一
另外一篇短文里还有第三种解决方案,查看请点击这里 1.异常信息 创建maven web项目时,出现 The superclass “javax.servlet.http.HttpServlet&quo ...
- Automate the Sizing of your SGA in Oracle 10g
How much memory does each of the individual components of the SGA need? Oracle now has methods to de ...
- hue简单介绍
hue定义: HUE=Hadoop User Experience 个人理解:可视图的webui界面,方便大数据技术之间的CRUD操作. 官方定义:Hue是一个能够与Apache Hadoop交互的W ...
- Asp.net单点登录解决方案
原文出处:http://www.cnblogs.com/wu-jian 主站:Passport集中验证服务器,DEMO中为:http://www.passport.com/ 分站:http://www ...
- jquery如何设置与去除disabled属性?五种方法
//两种方法设置disabled属性 $('#areaSelect').attr("disabled",true); $('#areaSelect').attr("dis ...
- CMake: Could NOT find PkgConfig
转自http://www.ogre3d.org/forums/viewtopic.php?f=22&t=78490 Looking for OGRE... Could NOT find Pkg ...
- 【2】python3字符串的比较(辨析is与==的区别)
PYTHON3基本数据类型(二.字符串) Python3字符串 ①字符串比较 1.比较字符串是否相同: ==:使用==来比较两个字符串内的value值是否相同 is:比较两个字符串的id值. 2.字符 ...
- 10-19文献阅读之DCB
---恢复内容开始--- <一种精确估计区域北斗接收机硬件延迟的方法>-2016-,很有价值 估计北斗接收机硬件延迟,不需要传统复杂的电离层模型.已知一个参考站接收机硬件延迟的条件下,利用 ...
- 【Alpha】Daily Scrum Meeting——blog2
团队成员 吴吉键 201421122007(组长) 魏修祺 201421122008 孙劲林 201421122022 1. 会议当天照片 忘记拍了!(没有拍照片的习惯,没有第四人拍照) 2. 每个人 ...