我通过
JavaScript在webproject创建一个画布.
画布在x-y平面上具有图形表示.
我调查了几个方法:
1)在画布上绘制12个月的数据,当鼠标向前滚动时,第一个月的数据消失,最后添加新的月份数据,绘制新的画布.
Con: – 每次鼠标滚动到通过时间轴平移 – 必须创建一个新的SQL查询,使我的Web应用程序非常慢.
2)也许我可以通过1 SQL查询在画布上画出10年的数据,但只显示12个月的数据.掩盖9年的其余时间.现在当客户端滚动时,我捕获滚动事件并移动到画布的相应部分.这可能吗?那如何呢?
有人建议吗
我目前的画布表示=只有12个月的数据
为了更具体的滚动,我想有一个感觉,如下面的窗口小部件用于我的客户端滚动操作:
解决方法
这是一个非常基本的实现:
http://jsfiddle.net/CQPeU/
var can = document.getElementById("can"),ctx = can.getContext('2d'),dragging = false,lastX = 0,translated = 0; // these two lines will make the y-axis grow upwards. ctx.scale(1,-1); ctx.translate(0,-400); can.onmousedown = function(e){ var evt = e || event; dragging = true; lastX = evt.offsetX; } window.onmousemove = function(e){ var evt = e || event; if (dragging){ var delta = evt.offsetX - lastX; translated += delta; ctx.translate(delta,0); // translate the context. lastX = evt.offsetX; draw(); // redraw } } window.onmouseup = function(){ dragging = false; } function draw() { ctx.clearRect(-translated,600,400); // this is why we need to keep track of how much we've translated for (var i = 0; i < plot.length; i++) { ctx.beginPath(); ctx.arc(plot[i].x,plot[i].y,5,2 * Math.PI); // note we don't have to futz with the x/y values,and can use them directly. ctx.fill(); } }
要创建一个网格,你可以这样做:
var grid = (function(dX,dY){ var can = document.createElement("canvas"),ctx = can.getContext('2d'); can.width = dX; can.height = dY; // fill canvas color ctx.fillStyle = 'black'; ctx.fillRect(0,dX,dY); // x axis ctx.strokeStyle = 'orange'; ctx.moveTo(.5,0.5); ctx.lineTo(dX + .5,0.5); ctx.stroke(); // y axis ctx.moveTo(.5,.5); ctx.lineTo(.5,dY + .5); ctx.stroke(); return ctx.createPattern(can,'repeat'); })(100,50);
这将像这样使用:
function draw() { ctx.clearRect(-translated,400); ctx.rect(-translated,400); ctx.fillStyle = grid; ctx.fill(); ctx.fillStyle = "#fff"; for (var i = 0; i < plot.length; i++) { ctx.beginPath(); ctx.arc(plot[i].x,2 * Math.PI); ctx.fill(); } }