html5 canvas做的图表插件
用highchart的时候发现它是用svg来画图的，那么用canvas来做怎么样的。
以前做AS图表插件的时候，绘制图画主要用容器的Graphics对象来绘制，而canvas的context和Graphics一样，都可以用来绘制图形。
然后就试着用canvas做了这样一个东西。
具体实现如下，个人表达能力有问题，各位看官还是看源码吧，如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>LineChart</title> </head> <body>
<div id="lineChart" style="width: 900px;height: 600px;border: #c9302c"></div>
<script src="jquery-1.8.2.min.js"></script>
<script src="ChartTest1.js"></script>
<script type="text/javascript">
$("#lineChart").lineChart("init");
</script>
</body>
</html>
ChartTest1.js源码如下：
/**
* Created by jackyWHJ on 14-2-26.
*/
(function($) { var canvas,context;
var stepXArr=[],stepYArr=[],xStepWidth=0;
var xAxisHeight = 0 ,yAxisWidth = 0;
var heightVal = 0;//高度值对应数据比例 /**
* 画X轴
* */
var drawXAxis = function (xAxisData) {
context.beginPath();
//画X轴横线
context.moveTo(yAxisWidth - 6, canvas.height - xAxisHeight);
context.lineTo(canvas.width-yAxisWidth,canvas.height - xAxisHeight);
//画刻度、加标签
var len = xAxisData.length;
xStepWidth = (canvas.width-2*yAxisWidth)/len;
for(var i = 0;i < len;i++){
//画刻度，默认刻度高度为6个像素
context.moveTo(yAxisWidth + (i+1)*xStepWidth, canvas.height - xAxisHeight);
context.lineTo(yAxisWidth + (i+1)*xStepWidth,canvas.height - xAxisHeight + 6);
//画标签，默认字体为14个像素
context.font = 'normal normal bold 14px 微软雅黑';
//字体居中在刻度中间
context.fillText(xAxisData[i],
yAxisWidth + (i+0.5)*xStepWidth - xAxisData[i].length*14/2,
canvas.height - xAxisHeight + 24);
//缓存刻度位置，用于画网格
stepXArr.push(yAxisWidth + (i+1)*xStepWidth);
} context.stroke();
} /**
* 画Y轴
* */
var drawYAxis = function(yMax,step) {
context.beginPath();
//画X轴横线
context.moveTo(yAxisWidth, xAxisHeight);
context.lineTo(yAxisWidth,canvas.height - xAxisHeight + 6);
//画刻度、加标签
var tickWidth = (canvas.height - 2*xAxisHeight )/step;
heightVal = (canvas.height - 2*xAxisHeight )/yMax;
for(var i = 0;i <= step;i++){
//画刻度，默认刻度高度为6个像素
context.moveTo(yAxisWidth, canvas.height - xAxisHeight - tickWidth * i);
context.lineTo(yAxisWidth - 6,canvas.height - xAxisHeight - tickWidth * i);
//画标签，默认字体为14个像素
context.font = 'normal normal 14px 微软雅黑';
//字体居中在刻度中间
context.fillText(yMax/step * i,
yAxisWidth - 50,
canvas.height - xAxisHeight - tickWidth * i + 7);
//缓存刻度位置，用于画网格
stepYArr.push(canvas.height - xAxisHeight - tickWidth * i);
}
context.stroke();
} /**
* 画网格
* */
var drawGrid = function() {
context.save(); context.strokeStyle = "#6e6e6e";
context.fillStyle = '#ffffff';
context.lineWidth = 0.5; //画横线
var j = 0,stepX = (canvas.width - 2*yAxisWidth)/10,stepY = (canvas.height - 2*xAxisHeight)/10;
//10个像素位为单位,6个像素画线，4个像素空出来，成为虚线
for (var i = 0,len = stepYArr.length; i < len; i ++) {
context.beginPath();
for(j = 0;j < stepX;j++){
context.moveTo(yAxisWidth + j*10, stepYArr[i]);
context.lineTo(yAxisWidth + j*10 + 6, stepYArr[i]);
}
context.stroke();
} //画竖线
for (var i = 0,len = stepXArr.length; i < len; i ++) {
context.beginPath();
for(j = 0;j < stepY;j++){
context.moveTo(stepXArr[i],xAxisHeight + j*10 );
context.lineTo(stepXArr[i],xAxisHeight + j*10+6);
}
context.stroke();
}
context.restore();
} /**
* 画线条
* */
var drawLine = function(lineData){
//循环数据源画线条
context.beginPath();
context.fillStyle = '#000000';
context.lineWidth = 2;
context.moveTo(stepXArr[0] - xStepWidth/2 ,canvas.height - xAxisHeight - lineData[0]*heightVal);
for (var i = 1,len = lineData.length; i < len; i ++) {
context.lineTo(stepXArr[i] - xStepWidth/2 ,canvas.height - xAxisHeight - lineData[i]*heightVal);
}
context.stroke();
//画圆点
for (var i = 0,len = lineData.length; i < len; i ++) {
context.beginPath();
context.fillStyle = 'rgba(' + (Math.random()*255).toFixed(0) + ', ' +
(Math.random()*255).toFixed(0) + ', ' +
(Math.random()*255).toFixed(0) + ', 1.0)';
context.arc(stepXArr[i] - xStepWidth/2 ,canvas.height - xAxisHeight - lineData[i]*heightVal,
7, 0, Math.PI*2, true);
context.fill();
}
}
/**
* 画柱子
* */
var drawBar = function(barData,colorArr){
var barWidth = xStepWidth/2;//定义柱子宽度
//循环数据源画矩形
for (var i = 0,len = barData.length; i < len; i ++) {
context.beginPath();
context.fillStyle = colorArr[i];
context.fillRect(stepXArr[i] - xStepWidth/2 - barWidth/2,canvas.height - xAxisHeight - barData[i]*heightVal,
barWidth,barData[i]*heightVal);
context.fill();
}
} var methods = {
init: function(options) { // 在每个元素上执行方法
return this.each(function() {
var $this = $(this); // 尝试去获取settings，如果不存在，则返回“undefined”
var settings = $this.data("lineChart"); // 如果获取settings失败，则根据options和default创建它
if (typeof settings === "undefined") { var defaults = {
width:850,
height:450,
xAxis:["苹果","香蕉","梨","番茄","龙眼"],
lineData:[350,200,300,245,150],
barData:[350,134,120,51,90],
colorArr:['#ae303e','#913730','#D49797','0x538FD3','#A34e5d'],
onSomeEvent: function() {
}
}; settings = $.extend({}, defaults, options); // 保存我们新创建的settings
$this.data("lineChart", settings);
} else {
//如果我们获取了settings，则将它和options进行合并（这不是必须的，你可以选择不这样做）
settings = $.extend({}, settings, options); // 如果你想每次都保存options，可以添加下面代码：
// $this.data("lineChart", settings);
}
canvas = document.createElement("canvas");
canvas.width = settings.width;
canvas.height = settings.height;
canvas.style.cssText = 'margin:0 auto;';
$this.append(canvas);
context = canvas.getContext('2d');
xAxisHeight = settings.height/8 ,yAxisWidth = settings.width/8;
drawXAxis(settings.xAxis);
drawYAxis(400,10);
drawGrid();
drawBar(settings.barData,settings.colorArr);
drawLine(settings.lineData);
});
},
destroy: function(options) {
// 在每个元素中执行代码
return $(this).each(function() {
var $this = $(this); // 执行代码 // 删除元素对应的数据
$this.removeData("lineChart");
});
},
val: function(options) {
// 这里的代码通过.eq(0)来获取选择器中的第一个元素的，我们或获取它的HTML内容作为我们的返回值
var someValue = this.eq(0).html(); // 返回值
return someValue;
}
}; $.fn.lineChart = function() {
var method = arguments[0];
if (methods[method]) {
method = methods[method];
arguments = Array.prototype.slice.call(arguments, 1);
} else if (typeof method === "object" || !method) {
method = methods.init;
} else {
$.error("Method" + method + "does not exist on jQuery.pluginName");
return this;
}
return method.apply(this, arguments);
};
})(jQuery);
html5 canvas做的图表插件的更多相关文章
- 基于html5 canvas 的强大图表插件【Chart.js】
名词解释 Chart.js:是基于html5和canvas的强大图表插件,支持多样的图表形式,柱状线性饼环极地雷达等等: canvas:只兼容到IE9 excanvas.js:强大的第三方兼容插件,可 ...
- HTML5 canvas生成图片马赛克特效插件
HTML5 canvas生成图片马赛克特效插件 简要教程 这是一款使用html5 canvas来将图片制作成马赛克效果的js插件.该插件的灵感来自于美国肖像画家Chuck Close.已经有人使用这个 ...
- canvas的Chart图表插件
今天写页面页面需求到柱状图标,今天介绍一下我所用的Chart.js图表插件 官网:http://www.bootcss.com/p/chart.js/ 里面会有下载js文件和中文文档 ...
- 18个基于 HTML5 Canvas 开发的图表库
如今,HTML5 可谓如众星捧月一般,受到许多业内巨头的青睐.很多Web开发者也尝试着用 HTML 5 来制作各种各样的富 Web 应用.HTML 5 规范引进了很多新特性,其中之一就是 Canvas ...
- 用HTML5 Canvas 做擦除及扩散效果
2013年的时候曾经使用canvas实现了一个擦除效果的需求,即模拟用户在模糊的玻璃上擦除水雾看到清晰景色的交互效果.好在2012年的时候学习HTML5的时候研究过canvas了,所以在比较短的时间内 ...
- 用HTML5 Canvas做一个画图板
使用HTML5可以非常简单地在canvas上实现画图应用,用支持html5的浏览器便可在下面的区域进行绘画,要看到演示效果,请确保你的浏览器支持HTML5: 功能很简单,原理其实和拖放是类似的,主要是 ...
- 使用HTML5 canvas做地图（3）图片加载平移放大缩小
终于开始可以写代码了,手都开始痒了.这里的代码仅仅是在chrome检测过,我可以肯定的是IE10以下浏览器是行不通,我一直在考虑,是不是使用IE禁止看我的篇博客,就是这群使用IE的人,给我加了很多工作 ...
- 用HTML5 CANVAS做自定义路径的动态效果图片！
最近对HTML5开始感兴趣了,实现的效果如下图,大家可以从代码里换掉图片 我用的是canvas里面的2d绘图,其中上图的路径是网上在线绘制的,我太懒了,哈哈 下面是网址: http://www.vic ...
- 【Bugly干货分享】一起用 HTML5 Canvas 做一个简单又骚气的粒子引擎
Bugly 技术干货系列内容主要涉及移动开发方向,是由Bugly邀请腾讯内部各位技术大咖,通过日常工作经验的总结以及感悟撰写而成,内容均属原创,转载请标明出处. 前言 好吧,说是“粒子引擎”还是大言不 ...
随机推荐
- Yii 获得当前控制器和方法
[怎样获得当前控制器和方法] 控制器:$this -> id ; 方法:$this->action->id ; 这主要是用在视图中,进行高亮显示. <div id=" ...
- webcat——基于netty的http和websocket框架
代码地址如下:http://www.demodashi.com/demo/12687.html Webcat是一个基于netty的简单.高性能服务端框架,目前提供http和websocket两种协议的 ...
- 自己定义View时，用到Paint Canvas的一些温故，讲讲平时一些效果是怎么画的（基础篇 一）
转载请注明出处王亟亟的大牛之路 之前也有一个相似于画板的操作,可是不够具体,这边先补上链接.有兴趣的小伙伴能够看看http://blog.csdn.net/ddwhan0123/article/det ...
- Centos7 搭建最新 Nexus3 Maven 私服
Maven 介绍 Apache Maven 是一个创新的软件项目管理和综合工具.Maven 提供了一个基于项目对象模型(POM)文件的新概念来管理项目的构建,可以从一个中心资料片管理项目构建,报告和文 ...
- 解决zabbix“ZBX_NOTSUPPORTED: Timeout while executing a shell script”报错
如题所示,在zabbix_server使用zabbix_get获取自定义“UserParameter”对应的脚本的数据时,出现了如题所示的报错信息 [root@nmp01 scripts]# /usr ...
- js事件之onmousedown和onmouseup
<!DOCTYPE html> <html> <head> <script> function mouseDown() { document.getEl ...
- iOS端App的icon和Launch Image规格实时更新
启动影像 : iPhone :320 x 480 640 x 960 640*1136 750*1334 1242*2208 iPad :768 x 1004 1536 x 2008 APP图标: ...
- Verilog 浮点数运算模块
算法中常常会到浮点数运算,而浮点数的处理常常是Verilog初学中常常遇到的问题.以下将就一个简单的例子说明Verilog中浮点数运算处理. 在JPEG图像压缩时遇到色彩空间变换的问题,将YCbCr转 ...
- 什么是CouchDB？
※本文对CouchDB的解释是来自Apache CouchDB的官网的译文,如果有什么问题,请指正. 1.CouchDB简介 CouchDB是一种利用JSON文件,javascript作为MapRed ...
- ws 无法热替换的问题
这个坑自己踩过并且第二次就记录一下,因为一直习惯用ws, 使用热部署的时候发现无法自动同步热更新,找了很多方法,具体解决方式如下: webstorm默认保存在临时文件夹,根据下面路径将默认勾选项去除即 ...