- (function($){
- /*---------------------以下是使用html5 canvas制作的绘图插件-------------------*/
- var options;//全局参数
- $.canvasPrint=function(option){
- var defaults={
- canvas:null,//html canvas标签对象
- data:"",//所需的绘制数据
- lineDiv:null,//放置图例的标签对象
- xInterval:30//x轴刻度间隔
- };
- options=$.extend(defaults,option);
- $.canvasPrint.Show(options.canvas, options.data, options.lineDiv);
- }
- /**
- *功能:时间比较--确定所给时间在x轴的哪个区域
- *参数:timeList--x轴刻度,timeStr--将要比较的时间
- */
- $.canvasPrint.compareTime=function(timeList,timeStr){
- outer: for(var i = 0; i < timeList.length; i ++){
- var date1=Date.parse(timeStr);
- var date2=Date.parse(timeList[i]);
- var s=date1.compareTo(date2);
- if(i==0){
- switch(s){
- case -1:
- return null;
- case 0:
- return i;
- case 1:
- continue outer;
- default:
- break;
- }
- }else if(i==timeList.length-1){
- switch(s){
- case -1:
- return i-1;
- case 0:
- return i;
- case 1:
- return null;
- default:
- break;
- }
- }else{
- switch(s){
- case -1:
- return i-1;
- case 0:
- return i;
- case 1:
- continue outer;
- default:
- break;
- }
- }
- }
- }
- /**
- *功能:鼠标悬浮提示框
- *参数:str--提示文字,event--响应动作,color--边框颜色
- */
- $.canvasPrint.ShowTitle=function(str, event, color){
- var e = window.event || event;
- if(document.getElementById("temp_title")){
- document.getElementById("temp_title").style.display = 'block';
- document.getElementById("temp_title").style.borderColor = color;
- }
- else{
- var v = document.createElement("div");
- v.id = "temp_title";
- v.style.borderColor = color;
- document.body.appendChild(v);
- }
- document.getElementById("temp_title").innerHTML = str.replace(/\\n/g, '<br />');
- var xtop = e.clientY + document.documentElement.scrollTop + 17;
- var xleft = e.clientX + document.documentElement.scrollLeft + 10;
- document.getElementById("temp_title").style.top = xtop + "px";
- document.getElementById("temp_title").style.left = xleft + "px";
- }
- /**
- *功能:曲线绘制
- *参数:o--画图对象,arr--需要绘制的曲线数据,time--x轴刻度,even--交点半径,ht--画图区域高度,text--是否显示文本,
- * colw--列宽,rowh--行高
- */
- $.canvasPrint.lineTo=function(o, arr, time, even, ht, text, colw, rowh){
- o.beginPath();
- o.fillStyle = o.strokeStyle = arr.Color;
- for(var i = 0; i < arr.Data.length; i ++){
- var resultTimeIndex= $.canvasPrint.compareTime(Data.Time,arr.Data[i].time);
- if(resultTimeIndex!=null){
- var minusResult=(Date.parse(arr.Data[i].time)-Date.parse(Data.Time[resultTimeIndex]))/1000;
- // var timeArray=arr.Data[i].time.split(":");
- // timeArray[2]=timeArray[2].replace(/\\b0{1}/g,"");//将秒数第一个0去掉
- // var te=(timeArray[2]>xInterval?timeArray[2]-xInterval:timeArray[2])/options.xInterval
- //当前值距离原点的距离
- // var distanceToOrigin=(timeArray[2]>=options.xInterval?timeArray[2]-options.xInterval:timeArray[2])/(options.xInterval)*colw+resultTimeIndex*colw;
- var distanceToOrigin=minusResult/(options.xInterval)*colw+resultTimeIndex*colw;
- if(text) {
- // o.fillText(arr.Data[i], i * colw + 46, ht - arr.Data[i] / 10 - 46);
- // o.fillText(arr.Data[i], i * colw + 46, ht - parseInt(arr.Data[i].replace(/\\%/g,""))/20*rowh - 46);
- //先把%去掉,再按rowh的比例计算
- o.fillText(arr.Data[i].value, distanceToOrigin + 46, ht - parseInt(arr.Data[i].value.replace(/\\%/g,""))/20*rowh - 46);
- }
- // o.lineTo(i * colw + 50, ht - arr.Data[i] / 10 - 30);
- o.lineTo(distanceToOrigin + 50, ht-parseInt(arr.Data[i].value.replace(/\\%/g,""))/20*rowh - 30);
- }
- }
- o.stroke();
- o.closePath();
- for(var i = 0; i < arr.Data.length; i ++){
- var resultTimeIndex=$.canvasPrint.compareTime(Data.Time,arr.Data[i].time);
- if(resultTimeIndex!=null){
- //var timeArray=arr.Data[i].time.split(":");
- //timeArray[2]=timeArray[2].replace(/\\b0{1}/g,"");
- var minusResult=(Date.parse(arr.Data[i].time)-Date.parse(Data.Time[resultTimeIndex]))/1000;//时间差
- // var distanceToOrigin=(timeArray[2]>=options.xInterval?timeArray[2]-options.xInterval:timeArray[2])/(options.xInterval)*colw+resultTimeIndex*colw;
- var distanceToOrigin=minusResult/(options.xInterval)*colw+resultTimeIndex*colw;
- o.beginPath();
- var x = distanceToOrigin + 50, y = ht - parseInt(arr.Data[i].value.replace(/\\%/g,""))/20*rowh - 30;
- o.arc(x, y, even || 3, 0, 360, false);
- var d = document.createElement('div');
- d.className = 'cTitle';
- // d.style.left = x - 7 +document.getElementById("canvas").offsetLeft+ 'px';
- d.style.left = x - 7 +options.canvas.getBoundingClientRect().left+document.documentElement.scrollLeft+ 'px';
- d.style.top = (y - 7+options.canvas.getBoundingClientRect().top+document.documentElement.scrollTop) + 'px';
- // d.style.top = (y - 7+document.getElementById("canvas").getBoundingClientRect().top+ht-canvas.clientHeight) + 'px';
- d.style.borderColor = arr.Color;
- d._title = 'Title:' + arr.Title + '\\nTime:' + arr.Data[i].time + '\\nData:' + arr.Data[i].value;
- d.onmouseover = function(event){
- $.canvasPrint.ShowTitle(this._title, event, arr.Color);
- this.className += ' cTitleHover';
- this.onmouseout = function(){
- if(document.getElementById("temp_title")) document.getElementById("temp_title").style.display='none';
- this.className = 'cTitle';
- }
- }
- document.body.appendChild(d);
- o.stroke();
- o.fill();
- o.closePath();
- }
- }
- }
- /**
- * 功能:画图的总入口函数
- * 参数:colw--列宽,rowh--行高
- * d--canvas对象,data--绘制图形所需的数据,f--容器对象
- */
- $.canvasPrint.Show=function(d, data, f,colw, rowh){
- var colw = colw || (d.offsetWidth - 20) / data.Time.length;
- // var rowh = rowh || 50;
- var rowh=rowh||(d.offsetHeight - 20)/6
- var c = d.getContext('2d');
- c.fillStyle = '#000';
- c.lineWidth = 0.3;
- c.fillRect(0, 0, d.offsetWidth, d.offsetHeight);
- c.strokeStyle = "#ccc";
- c.fillStyle = '#0ff';
- c.font = '9px verdana';
- c.textBaseline = 'top';
- var j=0;
- for(var i = 70; i < d.offsetHeight; i += rowh){
- c.beginPath();
- //y轴的刻度,到时候可以依照需求自己画
- if(data.Ruler){
- // var t = (d.offsetHeight - i - 30) * 10;
- // c.fillText(t, (5 - new String(t).length) * 7, i - 4);
- var t=(100-j*20)+"%";//左侧刻度百分比
- c.fillText(t, (5 - new String(t).length) * 7, i -4);
- }
- //画平行于 x轴的线
- if(data.Grid){
- c.lineTo(40, i);
- c.lineTo(d.offsetWidth, i);
- }
- c.stroke();
- c.closePath();
- j++;
- }
- if(data.Grid){
- //画平行于 y轴的线
- for(var i = 50; i < d.offsetWidth; i += colw){
- c.beginPath();
- c.lineTo(i, 0);
- c.lineTo(i, d.offsetHeight - 20);
- c.stroke();
- c.closePath();
- }
- }
- if(data.Ruler){
- c.beginPath();
- //x轴的刻度
- for(var i = 0; i < data.Time.length; i ++){
- c.fillText(data.Time[i], i * colw + 25, d.offsetHeight - 13)
- }
- c.stroke();
- c.closePath();
- }
- c.lineWidth = data.LineW || 0.8;
- if(!f.innerHTML){
- for(var i = 0; i < data.List.length; i ++){
- f.innerHTML += "<input type='checkbox' value='" + data.List[i].Title + "' checked='" + data.List[i].Check + "' onclick='$.canvasPrint.run(this, " + i + ");' /><font style='color:" + data.List[i].Color + "'>" + data.List[i].Title + "</font>";
- }
- }
- for(var i = 0; i < data.List.length; i ++){
- if(data.List[i].Check){
- $.canvasPrint.lineTo(c, data.List[i], data.Time, data.Even, d.offsetHeight, data.Text, colw, rowh);
- }
- }
- }
- /**
- *功能:当更改参数时图表重新载入
- *参数: o--更改参数的标签对象,i--第几条数据
- */
- $.canvasPrint.run=function (o, i){
- if(document.all) return false;//判断是否是ie
- if(o) Data.List[i].Check = o.checked;
- $.canvasPrint.Show(options.canvas, Data, options.lineDiv);
- }
- })(jQuery);
- //该片段来自于http://www.codesnippet.cn/detail/2208201410292.html
来源: http://www.codesnippet.cn/detail/2208201410292.html