X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=dygraph-canvas.js;h=cba4f44939db504aac3903017f42807a54765ad3;hb=24f2a74f2b51cd3ecc187618ea9e061956cf9895;hp=e531ece4ba73566b0a5df54ab391fccd687d6935;hpb=ae0adedeaa305a23ecb40ccce9ec9d758476aa64;p=dygraphs.git diff --git a/dygraph-canvas.js b/dygraph-canvas.js index e531ece..cba4f44 100644 --- a/dygraph-canvas.js +++ b/dygraph-canvas.js @@ -39,8 +39,8 @@ * The chart canvas has already been created by the Dygraph object. The * renderer simply gets a drawing context. * - * @param {Dyraph} dygraph The chart to which this renderer belongs. - * @param {Canvas} element The <canvas> DOM element on which to draw. + * @param {Dygraph} dygraph The chart to which this renderer belongs. + * @param {HTMLCanvasElement} element The <canvas> DOM element on which to draw. * @param {CanvasRenderingContext2D} elementContext The drawing context. * @param {DygraphLayout} layout The chart's DygraphLayout object. * @@ -57,9 +57,8 @@ var DygraphCanvasRenderer = function(dygraph, element, elementContext, layout) { this.height = this.element.height; this.width = this.element.width; - this.elementContext.save(); - // --- check whether everything is ok before we return + // NOTE(konigsberg): isIE is never defined in this object. Bug of some sort. if (!this.isIE && !(DygraphCanvasRenderer.isSupported(this.element))) throw "Canvas is not supported."; @@ -127,11 +126,6 @@ DygraphCanvasRenderer.prototype.clear = function() { context.clearRect(0, 0, this.width, this.height); }; -DygraphCanvasRenderer.prototype.onDoneDrawing = function() { - // balances the save called in the constructor. - this.elementContext.restore(); -} - /** * Checks whether the browser supports the <canvas> tag. * @private @@ -380,7 +374,7 @@ DygraphCanvasRenderer._drawSeries = function(e, ctx.moveTo(point.canvasx, point.canvasy); } if (drawPoints || isIsolated) { - pointsOnLine.push([point.canvasx, point.canvasy]); + pointsOnLine.push([point.canvasx, point.canvasy, point.idx]); } prevCanvasX = point.canvasx; prevCanvasY = point.canvasy; @@ -405,7 +399,7 @@ DygraphCanvasRenderer._drawPointsOnLine = function( var cb = pointsOnLine[idx]; ctx.save(); drawPointCallback( - e.dygraph, e.setName, ctx, cb[0], cb[1], color, pointSize); + e.dygraph, e.setName, ctx, cb[0], cb[1], color, pointSize, cb[2]); ctx.restore(); } }; @@ -440,14 +434,16 @@ DygraphCanvasRenderer.prototype._updatePoints = function() { /** * Add canvas Actually draw the lines chart, including error bars. - * If opt_seriesName is specified, only that series will be drawn. - * (This is used for expedited redrawing with highlightSeriesOpts) - * Lines are typically drawn in the non-interactive dygraph canvas. If opt_ctx - * is specified, they can be drawn elsewhere. * * This function can only be called if DygraphLayout's points array has been * updated with canvas{x,y} attributes, i.e. by * DygraphCanvasRenderer._updatePoints. + * + * @param {string=} opt_seriesName when specified, only that series will + * be drawn. (This is used for expedited redrawing with highlightSeriesOpts) + * @param {CanvasRenderingContext2D} opt_ctx when specified, the drawing + * context. However, lines are typically drawn on the object's + * elementContext. * @private */ DygraphCanvasRenderer.prototype._renderLineChart = function(opt_seriesName, opt_ctx) { @@ -482,7 +478,7 @@ DygraphCanvasRenderer.prototype._renderLineChart = function(opt_seriesName, opt_ for (var j = 0; j < sets.length; j++) { setName = setNames[j]; - if (opt_seriesName && !(is_last && setName == opt_seriesName)) continue; + if (opt_seriesName && setName != opt_seriesName) continue; var points = sets[j]; @@ -514,6 +510,7 @@ DygraphCanvasRenderer.prototype._renderLineChart = function(opt_seriesName, opt_ plotArea: this.area, seriesIndex: j, seriesCount: sets.length, + singleSeriesName: opt_seriesName, allSeriesPoints: sets }); ctx.restore(); @@ -671,6 +668,9 @@ DygraphCanvasRenderer._errorPlotter = function(e) { * @private */ DygraphCanvasRenderer._fillPlotter = function(e) { + // Skip if we're drawing a single series for interactive highlight overlay. + if (e.singleSeriesName) return; + // We'll handle all the series at once, not one-by-one. if (e.seriesIndex !== 0) return; @@ -702,7 +702,14 @@ DygraphCanvasRenderer._fillPlotter = function(e) { var stackedGraph = g.getOption("stackedGraph"); var colors = g.getColors(); - var baseline = {}; // for stacked graphs: baseline for filling + // For stacked graphs, track the baseline for filling. + // + // The filled areas below graph lines are trapezoids with two + // vertical edges. The top edge is the line segment being drawn, and + // the baseline is the bottom edge. Each baseline corresponds to the + // top line segment from the previous stacked line. In the case of + // step plots, the trapezoids are rectangles. + var baseline = {}; var currBaseline; var prevStepPlot; // for different line drawing modes (line/step) per series @@ -734,13 +741,24 @@ DygraphCanvasRenderer._fillPlotter = function(e) { 'rgba(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ',' + fillAlpha + ')'; ctx.fillStyle = err_color; ctx.beginPath(); - while(iter.hasNext) { + var last_x, is_first = true; + while (iter.hasNext) { var point = iter.next(); if (!Dygraph.isOK(point.y)) { prevX = NaN; + if (point.y_stacked !== null && !isNaN(point.y_stacked)) { + baseline[point.canvasx] = area.h * point.y_stacked + area.y; + } continue; } if (stackedGraph) { + if (!is_first && last_x == point.xval) { + continue; + } else { + is_first = false; + last_x = point.xval; + } + currBaseline = baseline[point.canvasx]; var lastY; if (currBaseline === undefined) {