X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;ds=sidebyside;f=dygraph-canvas.js;h=d3e0d4f276efd390faa27751b406c7ae353dbb22;hb=0d0a92db6678ca5a1c7086d1af0e1369a105b258;hp=0c44e8479ef4ba71ba5a3b535111725d2c9257d2;hpb=cbfcf21db4a2ef0f5db409591146f975ffe7b7f2;p=dygraphs.git diff --git a/dygraph-canvas.js b/dygraph-canvas.js index 0c44e84..d3e0d4f 100644 --- a/dygraph-canvas.js +++ b/dygraph-canvas.js @@ -383,9 +383,17 @@ DygraphCanvasRenderer.prototype._renderAxis = function() { } // draw a vertical line on the left to separate the chart from the labels. + var axisX; + if (this.attr_('drawAxesAtZero')) { + var r = this.dygraph_.toPercentXCoord(0); + if (r > 1 || r < 0) r = 0; + axisX = halfUp(this.area.x + r * this.area.w); + } else { + axisX = halfUp(this.area.x); + } context.beginPath(); - context.moveTo(halfUp(this.area.x), halfDown(this.area.y)); - context.lineTo(halfUp(this.area.x), halfDown(this.area.y + this.area.h)); + context.moveTo(axisX, halfDown(this.area.y)); + context.lineTo(axisX, halfDown(this.area.y + this.area.h)); context.closePath(); context.stroke(); @@ -436,8 +444,16 @@ DygraphCanvasRenderer.prototype._renderAxis = function() { } context.beginPath(); - context.moveTo(halfUp(this.area.x), halfDown(this.area.y + this.area.h)); - context.lineTo(halfUp(this.area.x + this.area.w), halfDown(this.area.y + this.area.h)); + var axisY; + if (this.attr_('drawAxesAtZero')) { + var r = this.dygraph_.toPercentYCoord(0, 0); + if (r > 1 || r < 0) r = 1; + axisY = halfDown(this.area.y + r * this.area.h); + } else { + axisY = halfDown(this.area.y + this.area.h); + } + context.moveTo(halfUp(this.area.x), axisY); + context.lineTo(halfUp(this.area.x + this.area.w), axisY); context.closePath(); context.stroke(); } @@ -675,37 +691,46 @@ DygraphCanvasRenderer.makeNextPointStep_ = function( } }; +DygraphCanvasRenderer.isNullOrNaN_ = function(x) { + return (x === null || isNaN(x)); +}; + DygraphCanvasRenderer.prototype._drawStyledLine = function( ctx, i, setName, color, strokeWidth, strokePattern, drawPoints, drawPointCallback, pointSize) { - var isNullOrNaN = function(x) { - return (x === null || isNaN(x)); - }; - var stepPlot = this.attr_("stepPlot"); var firstIndexInSet = this.layout.setPointsOffsets[i]; var setLength = this.layout.setPointsLengths[i]; - var afterLastIndexInSet = firstIndexInSet + setLength; var points = this.layout.points; - var prevX = null; - var prevY = null; - var nextY = null; - var pointsOnLine = []; // Array of [canvasx, canvasy] pairs. if (!Dygraph.isArrayLike(strokePattern)) { strokePattern = null; } var drawGapPoints = this.dygraph_.attr_('drawGapEdgePoints', setName); + ctx.save(); + if (strokeWidth && !stepPlot && (!strokePattern || strokePattern.length <= 1)) { + this._drawTrivialLine(ctx, points, setLength, firstIndexInSet, setName, color, strokeWidth, drawPointCallback, pointSize, drawPoints, drawGapPoints); + } else { + this._drawNonTrivialLine(ctx, points, setLength, firstIndexInSet, setName, color, strokeWidth, strokePattern, drawPointCallback, pointSize, drawPoints, drawGapPoints, stepPlot); + } + ctx.restore(); +}; + +DygraphCanvasRenderer.prototype._drawNonTrivialLine = function( + ctx, points, setLength, firstIndexInSet, setName, color, strokeWidth, strokePattern, drawPointCallback, pointSize, drawPoints, drawGapPoints, stepPlot) { + var prevX = null; + var prevY = null; + var nextY = null; var point, nextPoint; + var pointsOnLine = []; // Array of [canvasx, canvasy] pairs. var next = DygraphCanvasRenderer.makeNextPointStep_( this.attr_('connectSeparatedPoints'), points, firstIndexInSet, - afterLastIndexInSet); - ctx.save(); + firstIndexInSet + setLength); for (var j = 0; j < setLength; j = next(j)) { point = points[firstIndexInSet + j]; nextY = (next(j) < setLength) ? points[firstIndexInSet + next(j)].canvasy : null; - if (isNullOrNaN(point.canvasy)) { + if (DygraphCanvasRenderer.isNullOrNaN_(point.canvasy)) { if (stepPlot && prevX !== null) { // Draw a horizontal line to the start of the missing data ctx.beginPath(); @@ -719,12 +744,12 @@ DygraphCanvasRenderer.prototype._drawStyledLine = function( } else { // A point is "isolated" if it is non-null but both the previous // and next points are null. - var isIsolated = (!prevX && isNullOrNaN(nextY)); + var isIsolated = (!prevX && DygraphCanvasRenderer.isNullOrNaN_(nextY)); if (drawGapPoints) { // Also consider a point to be is "isolated" if it's adjacent to a // null point, excluding the graph edges. if ((j > 0 && !prevX) || - (next(j) < setLength && isNullOrNaN(nextY))) { + (next(j) < setLength && DygraphCanvasRenderer.isNullOrNaN_(nextY))) { isIsolated = true; } } @@ -767,7 +792,54 @@ DygraphCanvasRenderer.prototype._drawStyledLine = function( this.dygraph_, setName, ctx, cb[0], cb[1], color, pointSize); ctx.restore(); } - ctx.restore(); +}; + +DygraphCanvasRenderer.prototype._drawTrivialLine = function( + ctx, points, setLength, firstIndexInSet, setName, color, strokeWidth, drawPointCallback, pointSize, drawPoints, drawGapPoints) { + var prevX = null; + var prevY = null; + var nextY = null; + var pointsOnLine = []; // Array of [canvasx, canvasy] pairs. + ctx.beginPath(); + ctx.strokeStyle = color; + ctx.lineWidth = strokeWidth; + for (var j = firstIndexInSet; j < firstIndexInSet + setLength; ++j) { + var point = points[j]; + nextY = (j + 1 < firstIndexInSet + setLength) ? points[j + 1].canvasy : null; + if (DygraphCanvasRenderer.isNullOrNaN_(point.canvasy)) { + prevX = prevY = null; + } else { + var isIsolated = (!prevX && DygraphCanvasRenderer.isNullOrNaN_(nextY)); + if (drawGapPoints) { + // Also consider a point to be is "isolated" if it's adjacent to a + // null point, excluding the graph edges. + if ((j > firstIndexInSet && !prevX) || + ((j + 1 < firstIndexInSet + setLength) && DygraphCanvasRenderer.isNullOrNaN_(nextY))) { + isIsolated = true; + } + } + if (prevX === null) { + prevX = point.canvasx; + prevY = point.canvasy; + if (j === firstIndexInSet) { + ctx.moveTo(point.canvasx, point.canvasy); + } + } else { + ctx.lineTo(point.canvasx, point.canvasy); + } + if (drawPoints || isIsolated) { + pointsOnLine.push([point.canvasx, point.canvasy]); + } + } + } + ctx.stroke(); + for (var idx = 0; idx < pointsOnLine.length; idx++) { + var cb = pointsOnLine[idx]; + ctx.save(); + drawPointCallback( + this.dygraph_, setName, ctx, cb[0], cb[1], color, pointSize); + ctx.restore(); + } }; DygraphCanvasRenderer.prototype._drawLine = function(ctx, i) { @@ -825,6 +897,10 @@ DygraphCanvasRenderer.prototype._renderLineChart = function() { // Update Points // TODO(danvk): here + // + // TODO(bhs): this loop is a hot-spot for high-point-count charts. These + // transformations can be pushed into the canvas via linear transformation + // matrices. for (i = pointsLength; i--;) { point = points[i]; point.canvasx = this.area.w * point.x + this.area.x; @@ -953,7 +1029,7 @@ DygraphCanvasRenderer.prototype._renderLineChart = function() { } } newYs = [ point.canvasy, lastY ]; - + if(stepPlot) { // Step plots must keep track of the top and bottom of // the baseline at each point. @@ -965,13 +1041,13 @@ DygraphCanvasRenderer.prototype._renderLineChart = function() { } else { baseline[point.canvasx] = point.canvasy; } - + } else { newYs = [ point.canvasy, axisY ]; } if (!isNaN(prevX)) { ctx.moveTo(prevX, prevYs[0]); - + if (stepPlot) { ctx.lineTo(point.canvasx, prevYs[0]); if(currBaseline) { @@ -984,7 +1060,7 @@ DygraphCanvasRenderer.prototype._renderLineChart = function() { ctx.lineTo(point.canvasx, newYs[0]); ctx.lineTo(point.canvasx, newYs[1]); } - + ctx.lineTo(prevX, prevYs[1]); ctx.closePath(); }