X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=dygraph-canvas.js;h=5326673b1d466594a7e7bd35b4de2e8edb22e642;hb=beeabac2f71ae45c510b0355d0e76972083a6ca6;hp=7acaa1918154b464277d524a39304caa41b44532;hpb=74018de8a92f3dd5ca02f6f04f1617fc8bfc03be;p=dygraphs.git diff --git a/dygraph-canvas.js b/dygraph-canvas.js index 7acaa19..5326673 100644 --- a/dygraph-canvas.js +++ b/dygraph-canvas.js @@ -62,9 +62,6 @@ var DygraphCanvasRenderer = function(dygraph, element, elementContext, layout) { throw "Canvas is not supported."; // internal state - this.xlabels = []; - this.ylabels = []; - this.area = layout.getPlotArea(); this.container.style.position = "relative"; this.container.style.width = this.width + "px"; @@ -121,19 +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); - - this.xlabels = []; - this.ylabels = []; }; /** @@ -228,7 +212,6 @@ DygraphCanvasRenderer.prototype.render = function() { // Do the ordinary rendering, as before this._renderLineChart(); - // this._renderAxis(); }; DygraphCanvasRenderer.prototype._createIEClipArea = function() { @@ -300,185 +283,6 @@ DygraphCanvasRenderer.prototype._createIEClipArea = function() { }); }; -DygraphCanvasRenderer.prototype._renderAxis = function() { - if (!this.attr_('drawXAxis') && !this.attr_('drawYAxis')) return; - - // Round pixels to half-integer boundaries for crisper drawing. - function halfUp(x) { return Math.round(x) + 0.5; } - function halfDown(y){ return Math.round(y) - 0.5; } - - var context = this.elementContext; - - var label, x, y, tick, i; - - var labelStyle = { - position: "absolute", - fontSize: this.attr_('axisLabelFontSize') + "px", - zIndex: 10, - color: this.attr_('axisLabelColor'), - width: this.attr_('axisLabelWidth') + "px", - // height: this.attr_('axisLabelFontSize') + 2 + "px", - lineHeight: "normal", // Something other than "normal" line-height screws up label positioning. - overflow: "hidden" - }; - var makeDiv = function(txt, axis, prec_axis) { - var div = document.createElement("div"); - for (var name in labelStyle) { - if (labelStyle.hasOwnProperty(name)) { - div.style[name] = labelStyle[name]; - } - } - var inner_div = document.createElement("div"); - inner_div.className = 'dygraph-axis-label' + - ' dygraph-axis-label-' + axis + - (prec_axis ? ' dygraph-axis-label-' + prec_axis : ''); - inner_div.innerHTML=txt; - div.appendChild(inner_div); - return div; - }; - - // axis lines - context.save(); - context.strokeStyle = this.attr_('axisLineColor'); - context.lineWidth = this.attr_('axisLineWidth'); - - if (this.attr_('drawYAxis')) { - if (this.layout.yticks && this.layout.yticks.length > 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