X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=dygraph-canvas.js;h=8cb004052e1c4d3cb9b83e65e87ee3d423c6c120;hb=ee53deb9db465f5eea54e102ca755decef005496;hp=4a29848c61708d121162c8c21f5fc24bdecb663e;hpb=a02978e25e2155e5e6fda12d1a3184fa3bd7987c;p=dygraphs.git diff --git a/dygraph-canvas.js b/dygraph-canvas.js index 4a29848..8cb0040 100644 --- a/dygraph-canvas.js +++ b/dygraph-canvas.js @@ -29,6 +29,23 @@ "use strict"; +/** + * @constructor + * + * This gets called when there are "new points" to chart. This is generally the + * case when the underlying data being charted has changed. It is _not_ called + * in the common case that the user has zoomed or is panning the view. + * + * 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 {CanvasRenderingContext2D} elementContext The drawing context. + * @param {DygraphLayout} layout The chart's DygraphLayout object. + * + * TODO(danvk): remove the elementContext property. + */ var DygraphCanvasRenderer = function(dygraph, element, elementContext, layout) { this.dygraph_ = dygraph; @@ -48,7 +65,6 @@ var DygraphCanvasRenderer = function(dygraph, element, elementContext, layout) { this.xlabels = []; this.ylabels = []; this.annotations = []; - this.chartLabels = {}; this.area = layout.getPlotArea(); this.container.style.position = "relative"; @@ -79,6 +95,12 @@ DygraphCanvasRenderer.prototype.attr_ = function(x) { return this.dygraph_.attr_(x); }; +/** + * Clears out all chart content and DOM elements. + * This is called immediately before render() on every frame, including + * during zooms and pans. + * @private + */ DygraphCanvasRenderer.prototype.clear = function() { var context; if (this.isIE) { @@ -112,18 +134,15 @@ DygraphCanvasRenderer.prototype.clear = function() { removeArray(this.ylabels); removeArray(this.annotations); - for (var k in this.chartLabels) { - if (!this.chartLabels.hasOwnProperty(k)) continue; - var el = this.chartLabels[k]; - if (el.parentNode) el.parentNode.removeChild(el); - } this.xlabels = []; this.ylabels = []; this.annotations = []; - this.chartLabels = {}; }; - +/** + * Checks whether the browser supports the <canvas> tag. + * @private + */ DygraphCanvasRenderer.isSupported = function(canvasName) { var canvas = null; try { @@ -153,7 +172,11 @@ DygraphCanvasRenderer.prototype.setColors = function(colors) { }; /** - * Draw an X/Y grid on top of the existing plot + * 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 + * and zooms. + * @private */ DygraphCanvasRenderer.prototype.render = function() { // Draw the new X/Y grid. Lines appear crisper when pixels are rounded to @@ -209,8 +232,7 @@ DygraphCanvasRenderer.prototype.render = function() { // Do the ordinary rendering, as before this._renderLineChart(); this._renderAxis(); - this._renderChartLabels(); - this._renderAnnotations(); + // this._renderAnnotations(); }; DygraphCanvasRenderer.prototype._createIEClipArea = function() { @@ -462,123 +484,6 @@ DygraphCanvasRenderer.prototype._renderAxis = function() { }; -DygraphCanvasRenderer.prototype._renderChartLabels = function() { - var div, class_div; - - // Generate divs for the chart title, xlabel and ylabel. - // Space for these divs has already been taken away from the charting area in - // the DygraphCanvasRenderer constructor. - if (this.attr_('title')) { - div = document.createElement("div"); - div.style.position = 'absolute'; - div.style.top = '0px'; - div.style.left = this.area.x + 'px'; - div.style.width = this.area.w + 'px'; - div.style.height = this.attr_('titleHeight') + 'px'; - div.style.textAlign = 'center'; - div.style.fontSize = (this.attr_('titleHeight') - 8) + 'px'; - div.style.fontWeight = 'bold'; - class_div = document.createElement("div"); - class_div.className = 'dygraph-label dygraph-title'; - class_div.innerHTML = this.attr_('title'); - div.appendChild(class_div); - this.container.appendChild(div); - this.chartLabels.title = div; - } - - if (this.attr_('xlabel')) { - div = document.createElement("div"); - div.style.position = 'absolute'; - div.style.bottom = 0; // TODO(danvk): this is lazy. Calculate style.top. - div.style.left = this.area.x + 'px'; - div.style.width = this.area.w + 'px'; - div.style.height = this.attr_('xLabelHeight') + 'px'; - div.style.textAlign = 'center'; - div.style.fontSize = (this.attr_('xLabelHeight') - 2) + 'px'; - - class_div = document.createElement("div"); - class_div.className = 'dygraph-label dygraph-xlabel'; - class_div.innerHTML = this.attr_('xlabel'); - div.appendChild(class_div); - this.container.appendChild(div); - this.chartLabels.xlabel = div; - } - - var that = this; - function createRotatedDiv(axis, classes, html) { - var box = { - left: 0, - top: that.area.y, - width: that.attr_('yLabelWidth'), - height: that.area.h - }; - // TODO(danvk): is this outer div actually necessary? - div = document.createElement("div"); - div.style.position = 'absolute'; - if (axis == 1) { - div.style.left = box.left; - } else { - div.style.right = box.left; - } - div.style.top = box.top + 'px'; - div.style.width = box.width + 'px'; - div.style.height = box.height + 'px'; - div.style.fontSize = (that.attr_('yLabelWidth') - 2) + 'px'; - - var inner_div = document.createElement("div"); - inner_div.style.position = 'absolute'; - inner_div.style.width = box.height + 'px'; - inner_div.style.height = box.width + 'px'; - inner_div.style.top = (box.height / 2 - box.width / 2) + 'px'; - inner_div.style.left = (box.width / 2 - box.height / 2) + 'px'; - inner_div.style.textAlign = 'center'; - - // CSS rotation is an HTML5 feature which is not standardized. Hence every - // browser has its own name for the CSS style. - var val = 'rotate(' + (axis == 1 ? '-' : '') + '90deg)'; - inner_div.style.transform = val; // HTML5 - inner_div.style.WebkitTransform = val; // Safari/Chrome - inner_div.style.MozTransform = val; // Firefox - inner_div.style.OTransform = val; // Opera - inner_div.style.msTransform = val; // IE9 - - if (typeof(document.documentMode) !== 'undefined' && - document.documentMode < 9) { - // We're dealing w/ an old version of IE, so we have to rotate the text - // using a BasicImage transform. This uses a different origin of rotation - // than HTML5 rotation (top left of div vs. its center). - inner_div.style.filter = - 'progid:DXImageTransform.Microsoft.BasicImage(rotation=' + - (axis == 1 ? '3' : '1') + ')'; - inner_div.style.left = '0px'; - inner_div.style.top = '0px'; - } - - class_div = document.createElement("div"); - class_div.className = classes; - class_div.innerHTML = html; - - inner_div.appendChild(class_div); - div.appendChild(inner_div); - return div; - } - - var div; - if (this.attr_('ylabel')) { - div = createRotatedDiv(1, 'dygraph-label dygraph-ylabel', - this.attr_('ylabel')); - this.container.appendChild(div); - this.chartLabels.ylabel = div; - } - if (this.attr_('y2label') && this.dygraph_.numAxes() == 2) { - div = createRotatedDiv(2, 'dygraph-label dygraph-y2label', - this.attr_('y2label')); - this.container.appendChild(div); - this.chartLabels.y2label = div; - } -}; - - DygraphCanvasRenderer.prototype._renderAnnotations = function() { var annotationStyle = { "position": "absolute", @@ -890,10 +795,10 @@ DygraphCanvasRenderer.prototype._renderLineChart = function() { var setCount = setNames.length; // TODO(danvk): Move this mapping into Dygraph and get it out of here. - this.colors = {}; - for (i = 0; i < setCount; i++) { - this.colors[setNames[i]] = this.colorScheme_[i % this.colorScheme_.length]; - } + this.colors = this.dygraph_.colorsMap_; + // for (i = 0; i < setCount; i++) { + // this.colors[setNames[i]] = this.colorScheme_[i % this.colorScheme_.length]; + // } // Update Points // TODO(danvk): here