-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 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.appendChild(document.createTextNode(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 (var i = 0; i < this.layout.yticks.length; i++) {
- var tick = this.layout.yticks[i];
- if (typeof(tick) == "function") return;
- var 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';
- }
- var 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();
- */
-
- var 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) + fontSize;
- if (bottom > this.height - fontSize) {
- bottomTick.style.top = (parseInt(bottomTick.style.top) -
- fontSize / 2) + "px";
- }
- }
-
- // draw a vertical line on the left to separate the chart from the labels.
- 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.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();
- }
- }