X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=dygraph-canvas.js;h=3600b7857163488996818a0de212157d8ae79df2;hb=98eb4713efecf58b904def42d9030e61bcbb4181;hp=0d14ee7b0f89ffc3892c633e8131e79423f86600;hpb=d38c6191118e78792fa7f18bcc5eb3d8de74b610;p=dygraphs.git diff --git a/dygraph-canvas.js b/dygraph-canvas.js index 0d14ee7..3600b78 100644 --- a/dygraph-canvas.js +++ b/dygraph-canvas.js @@ -62,10 +62,6 @@ var DygraphCanvasRenderer = function(dygraph, element, elementContext, layout) { throw "Canvas is not supported."; // internal state - this.xlabels = []; - this.ylabels = []; - this.annotations = []; - this.area = layout.getPlotArea(); this.container.style.position = "relative"; this.container.style.width = this.width + "px"; @@ -122,21 +118,6 @@ DygraphCanvasRenderer.prototype.clear = function() { context = this.elementContext; context.clearRect(0, 0, this.width, this.height); - - function removeArray(ary) { - for (var i = 0; i < ary.length; i++) { - var el = ary[i]; - if (el.parentNode) el.parentNode.removeChild(el); - } - } - - removeArray(this.xlabels); - removeArray(this.ylabels); - removeArray(this.annotations); - - this.xlabels = []; - this.ylabels = []; - this.annotations = []; }; /** @@ -164,14 +145,6 @@ DygraphCanvasRenderer.isSupported = function(canvasName) { }; /** - * @param { [String] } colors Array of color strings. Should have one entry for - * each series to be rendered. - */ -DygraphCanvasRenderer.prototype.setColors = function(colors) { - this.colorScheme_ = colors; -}; - -/** * This method is responsible for drawing everything on the chart, including * lines, error bars, fills and axes. * It is called immediately after clear() on every frame, including during pans @@ -179,59 +152,7 @@ DygraphCanvasRenderer.prototype.setColors = function(colors) { * @private */ DygraphCanvasRenderer.prototype.render = function() { - // Draw the new X/Y grid. Lines appear crisper when pixels are rounded to - // half-integers. This prevents them from drawing in two rows/cols. - var ctx = this.elementContext; - function halfUp(x) { return Math.round(x) + 0.5; } - function halfDown(y){ return Math.round(y) - 0.5; } - - if (this.attr_('underlayCallback')) { - // NOTE: we pass the dygraph object to this callback twice to avoid breaking - // users who expect a deprecated form of this callback. - this.attr_('underlayCallback')(ctx, this.area, this.dygraph_, this.dygraph_); - } - - var x, y, i, ticks; - if (this.attr_('drawYGrid')) { - ticks = this.layout.yticks; - // TODO(konigsberg): I don't think these calls to save() have a corresponding restore(). - ctx.save(); - ctx.strokeStyle = this.attr_('gridLineColor'); - ctx.lineWidth = this.attr_('gridLineWidth'); - for (i = 0; i < ticks.length; i++) { - // TODO(danvk): allow secondary axes to draw a grid, too. - if (ticks[i][0] !== 0) continue; - x = halfUp(this.area.x); - y = halfDown(this.area.y + ticks[i][1] * this.area.h); - ctx.beginPath(); - ctx.moveTo(x, y); - ctx.lineTo(x + this.area.w, y); - ctx.closePath(); - ctx.stroke(); - } - ctx.restore(); - } - - if (this.attr_('drawXGrid')) { - ticks = this.layout.xticks; - ctx.save(); - ctx.strokeStyle = this.attr_('gridLineColor'); - ctx.lineWidth = this.attr_('gridLineWidth'); - for (i=0; i 0) { - var num_axes = this.dygraph_.numAxes(); - for (i = 0; i < this.layout.yticks.length; i++) { - tick = this.layout.yticks[i]; - if (typeof(tick) == "function") return; - x = this.area.x; - var sgn = 1; - var prec_axis = 'y1'; - if (tick[0] == 1) { // right-side y-axis - x = this.area.x + this.area.w; - sgn = -1; - prec_axis = 'y2'; - } - y = this.area.y + tick[1] * this.area.h; - - /* Tick marks are currently clipped, so don't bother drawing them. - context.beginPath(); - context.moveTo(halfUp(x), halfDown(y)); - context.lineTo(halfUp(x - sgn * this.attr_('axisTickSize')), halfDown(y)); - context.closePath(); - context.stroke(); - */ - - label = makeDiv(tick[2], 'y', num_axes == 2 ? prec_axis : null); - var top = (y - this.attr_('axisLabelFontSize') / 2); - if (top < 0) top = 0; - - if (top + this.attr_('axisLabelFontSize') + 3 > this.height) { - label.style.bottom = "0px"; - } else { - label.style.top = top + "px"; - } - if (tick[0] === 0) { - label.style.left = (this.area.x - this.attr_('yAxisLabelWidth') - this.attr_('axisTickSize')) + "px"; - label.style.textAlign = "right"; - } else if (tick[0] == 1) { - label.style.left = (this.area.x + this.area.w + - this.attr_('axisTickSize')) + "px"; - label.style.textAlign = "left"; - } - label.style.width = this.attr_('yAxisLabelWidth') + "px"; - this.container.appendChild(label); - this.ylabels.push(label); - } - - // The lowest tick on the y-axis often overlaps with the leftmost - // tick on the x-axis. Shift the bottom tick up a little bit to - // compensate if necessary. - var bottomTick = this.ylabels[0]; - var fontSize = this.attr_('axisLabelFontSize'); - var bottom = parseInt(bottomTick.style.top, 10) + fontSize; - if (bottom > this.height - fontSize) { - bottomTick.style.top = (parseInt(bottomTick.style.top, 10) - - fontSize / 2) + "px"; - } - } - - // 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(axisX, halfDown(this.area.y)); - context.lineTo(axisX, halfDown(this.area.y + this.area.h)); - context.closePath(); - context.stroke(); - - // if there's a secondary y-axis, draw a vertical line for that, too. - if (this.dygraph_.numAxes() == 2) { - context.beginPath(); - context.moveTo(halfDown(this.area.x + this.area.w), halfDown(this.area.y)); - context.lineTo(halfDown(this.area.x + this.area.w), halfDown(this.area.y + this.area.h)); - context.closePath(); - context.stroke(); - } - } - - if (this.attr_('drawXAxis')) { - if (this.layout.xticks) { - for (i = 0; i < this.layout.xticks.length; i++) { - tick = this.layout.xticks[i]; - x = this.area.x + tick[0] * this.area.w; - y = this.area.y + this.area.h; - - /* Tick marks are currently clipped, so don't bother drawing them. - context.beginPath(); - context.moveTo(halfUp(x), halfDown(y)); - context.lineTo(halfUp(x), halfDown(y + this.attr_('axisTickSize'))); - context.closePath(); - context.stroke(); - */ - - label = makeDiv(tick[1], 'x'); - label.style.textAlign = "center"; - label.style.top = (y + this.attr_('axisTickSize')) + 'px'; - - var left = (x - this.attr_('axisLabelWidth')/2); - if (left + this.attr_('axisLabelWidth') > this.width) { - left = this.width - this.attr_('xAxisLabelWidth'); - label.style.textAlign = "right"; - } - if (left < 0) { - left = 0; - label.style.textAlign = "left"; - } - - label.style.left = left + "px"; - label.style.width = this.attr_('xAxisLabelWidth') + "px"; - this.container.appendChild(label); - this.xlabels.push(label); - } - } - - context.beginPath(); - 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(); - } - - context.restore(); -}; - /** * Returns a predicate to be used with an iterator, which will