Skip to content

F
flot
Commit 97f2a127 authored by David Schnur's avatar David Schnur
Browse files
Options

Axes can now have basic horizontal text labels. 

Labels are provided via a 'label' option on the axis, and can be styled
with the flot-axis-label class.  The labelFont option works similarly to
tickFont, as an override for the default font or the flot-axis-label
class.  The labelPadding option adds extra space between the axis and
its label.

Since most plots with axis labels currently use @markrcote's
flot-axislabels plugin, we also support the axisLabel and
axisLabelPadding options, and the axisLabels / axis[name]Label CSS
classes, to make it as easy as possible to transition from that plugin.
These are deprecated, and will be removed in 1.0.

The implementation uses the internal text API introduced in 0.8.
parent 5209b8cd
Show whitespace changes
Inline Side-by-side
Showing with 99 additions and 34 deletions
API.md
View file @ 97f2a127
...@@ -270,6 +270,10 @@ xaxis, yaxis: { ...@@ -270,6 +270,10 @@ xaxis, yaxis: {
tickHeight: null or number tickHeight: null or number
tickFont: null or font-options object tickFont: null or font-options object
label: null or string
labelFont: null or font spec object
labelPadding: null or number
alignTicksWithAxis: null or number alignTicksWithAxis: null or number
reserveSpace: null or true reserveSpace: null or true
} }
......
jquery.flot.js
View file @ 97f2a127
...@@ -510,12 +510,17 @@ Licensed under the MIT license. ...@@ -510,12 +510,17 @@ Licensed under the MIT license.
tickHeight: null, // height of tick labels in pixels tickHeight: null, // height of tick labels in pixels
tickFont: null, // null or font-spec object (see font, above) tickFont: null, // null or font-spec object (see font, above)
label: null, // null or an axis label string
labelFont: null, // null or font-spec object (see font, above)
labelPadding: 2, // spacing between the axis and its label
reserveSpace: null, // whether to reserve space even if axis isn't shown reserveSpace: null, // whether to reserve space even if axis isn't shown
alignTicksWithAxis: null // axis number or null for no sync alignTicksWithAxis: null // axis number or null for no sync
}, },
yaxis: { yaxis: {
position: "left", // or "right"
autoscaleMargin: 0.02, autoscaleMargin: 0.02,
position: "left" // or "right" labelPadding: 2
}, },
xaxes: [], xaxes: [],
yaxes: [], yaxes: [],
...@@ -742,6 +747,15 @@ Licensed under the MIT license. ...@@ -742,6 +747,15 @@ Licensed under the MIT license.
axisOptions.tickColor = axisOptions.color; axisOptions.tickColor = axisOptions.color;
} }
// Compatibility with markrcote/flot-axislabels
if (!axisOptions.label && axisOptions.axisLabel) {
axisOptions.label = axisOptions.axisLabel;
}
if (!axisOptions.labelPadding && axisOptions.axisLabelPadding) {
axisOptions.labelPadding = axisOptions.axisLabelPadding;
}
axisOptions = $.extend(true, {}, options.xaxis, axisOptions); axisOptions = $.extend(true, {}, options.xaxis, axisOptions);
options.xaxes[i] = axisOptions; options.xaxes[i] = axisOptions;
...@@ -752,6 +766,9 @@ Licensed under the MIT license. ...@@ -752,6 +766,9 @@ Licensed under the MIT license.
if (axisOptions.tickFont || axisOptions.font) { if (axisOptions.tickFont || axisOptions.font) {
axisOptions.tickFont = $.extend({}, axisOptions.font || fontDefaults, axisOptions.tickFont); axisOptions.tickFont = $.extend({}, axisOptions.font || fontDefaults, axisOptions.tickFont);
} }
if (axisOptions.label && (axisOptions.labelFont || axisOptions.font)) {
axisOptions.labelFont = $.extend({}, axisOptions.font || fontDefaults, axisOptions.labelFont);
}
} }
axisCount = options.yaxes.length || 1; axisCount = options.yaxes.length || 1;
...@@ -762,6 +779,15 @@ Licensed under the MIT license. ...@@ -762,6 +779,15 @@ Licensed under the MIT license.
axisOptions.tickColor = axisOptions.color; axisOptions.tickColor = axisOptions.color;
} }
// Compatibility with markrcote/flot-axislabels
if (!axisOptions.label && axisOptions.axisLabel) {
axisOptions.label = axisOptions.axisLabel;
}
if (!axisOptions.labelPadding && axisOptions.axisLabelPadding) {
axisOptions.labelPadding = axisOptions.axisLabelPadding;
}
axisOptions = $.extend(true, {}, options.yaxis, axisOptions); axisOptions = $.extend(true, {}, options.yaxis, axisOptions);
options.yaxes[i] = axisOptions; options.yaxes[i] = axisOptions;
...@@ -772,6 +798,9 @@ Licensed under the MIT license. ...@@ -772,6 +798,9 @@ Licensed under the MIT license.
if (axisOptions.tickFont || axisOptions.font) { if (axisOptions.tickFont || axisOptions.font) {
axisOptions.tickFont = $.extend({}, axisOptions.font || fontDefaults, axisOptions.tickFont); axisOptions.tickFont = $.extend({}, axisOptions.font || fontDefaults, axisOptions.tickFont);
} }
if (axisOptions.label && (axisOptions.labelFont || axisOptions.font)) {
axisOptions.labelFont = $.extend({}, axisOptions.font || fontDefaults, axisOptions.labelFont);
}
} }
// backwards compatibility, to be removed in future // backwards compatibility, to be removed in future
...@@ -1411,25 +1440,29 @@ Licensed under the MIT license. ...@@ -1411,25 +1440,29 @@ Licensed under the MIT license.
axis.labelHeight = axis.tickHeight; axis.labelHeight = axis.tickHeight;
} }
///////////////////////////////////////////////////////////////////////
// Compute the axis bounding box based on the dimensions of its label
// and tick labels, then adjust the plotOffset to make room for it.
//
// This first phase only considers one dimension per axis; the other
// dimension depends on the other axes, and will be calculated later.
function allocateAxisBoxFirstPhase(axis) { function allocateAxisBoxFirstPhase(axis) {
// find the bounding box of the axis by looking at label
// widths/heights and ticks, make room by diminishing the var contentWidth = axis.tickWidth,
// plotOffset; this first phase only looks at one contentHeight = axis.tickHeight,
// dimension per axis, the other dimension depends on the axisOptions = axis.options,
// other axes so will have to wait tickLength = axisOptions.tickLength,
axisPosition = axisOptions.position,
var lw = axis.tickWidth,
lh = axis.tickHeight,
pos = axis.options.position,
tickLength = axis.options.tickLength,
axisMargin = options.grid.axisMargin, axisMargin = options.grid.axisMargin,
padding = options.grid.labelMargin, padding = options.grid.labelMargin,
all = axis.direction === "x" ? xaxes : yaxes, all = axis.direction === "x" ? xaxes : yaxes,
innermost; innermost;
// determine axis margin // Determine the margin around the axis
var samePosition = $.grep(all, function (a) {
return a && a.options.position === pos && a.reserveSpace; var samePosition = $.grep(all, function(axis) {
return axis && axis.options.position === axisPosition && axis.reserveSpace;
}); });
if ($.inArray(axis, samePosition) === samePosition.length - 1) { if ($.inArray(axis, samePosition) === samePosition.length - 1) {
axisMargin = 0; // outermost axisMargin = 0; // outermost
...@@ -1439,7 +1472,7 @@ Licensed under the MIT license. ...@@ -1439,7 +1472,7 @@ Licensed under the MIT license.
innermost = $.inArray(axis, samePosition) === 0; innermost = $.inArray(axis, samePosition) === 0;
// determine tick length - if we're innermost, we can use "full" // Determine the length of the tick marks
if (tickLength == null) { if (tickLength == null) {
if (innermost) { if (innermost) {
...@@ -1453,31 +1486,39 @@ Licensed under the MIT license. ...@@ -1453,31 +1486,39 @@ Licensed under the MIT license.
padding += +tickLength; padding += +tickLength;
} }
// compute box // Measure the dimensions of the axis label, if it has one
if (axis.direction === "x") {
lh += padding;
if (pos === "bottom") { if (axisOptions.label) {
plotOffset.bottom += lh + axisMargin; var layer = "flot-" + axis.direction + "-axis flot-" + axis.direction + axis.n + "-axis " + axis.direction + "Axis " + axis.direction + axis.n + "Axis",
axis.box = { top: surface.height - plotOffset.bottom, height: lh }; font = axisOptions.labelFont || "flot-axis-label axisLabels " + axis.direction + axis.n + "axisLabel",
labelInfo = surface.getTextInfo(layer, axisOptions.label, font);
contentWidth += labelInfo.width + axisOptions.labelPadding;
contentHeight += labelInfo.height + axisOptions.labelPadding;
}
// Compute the axis bounding box and update the plot bounds
if (axis.direction === "x") {
contentHeight += padding;
if (axisPosition === "top") {
axis.box = { top: plotOffset.top + axisMargin, height: contentHeight };
plotOffset.top += contentHeight + axisMargin;
} else { } else {
axis.box = { top: plotOffset.top + axisMargin, height: lh }; plotOffset.bottom += contentHeight + axisMargin;
plotOffset.top += lh + axisMargin; axis.box = { top: surface.height - plotOffset.bottom, height: contentHeight };
} }
} else { } else {
lw += padding; contentWidth += padding;
if (axisPosition === "right") {
if (pos === "left") { plotOffset.right += contentWidth + axisMargin;
axis.box = { left: plotOffset.left + axisMargin, width: lw }; axis.box = { left: surface.width - plotOffset.right, width: contentWidth };
plotOffset.left += lw + axisMargin;
} else { } else {
plotOffset.right += lw + axisMargin; axis.box = { left: plotOffset.left + axisMargin, width: contentWidth };
axis.box = { left: surface.width - plotOffset.right, width: lw }; plotOffset.left += contentWidth + axisMargin;
} }
} }
// save for future reference axis.position = axisPosition;
axis.position = pos;
axis.tickLength = tickLength; axis.tickLength = tickLength;
axis.box.padding = padding; axis.box.padding = padding;
axis.innermost = innermost; axis.innermost = innermost;
...@@ -2175,12 +2216,32 @@ Licensed under the MIT license. ...@@ -2175,12 +2216,32 @@ Licensed under the MIT license.
} }
var box = axis.box, var box = axis.box,
axisOptions = axis.options,
layer = "flot-" + axis.direction + "-axis flot-" + axis.direction + axis.n + "-axis " + axis.direction + "Axis " + axis.direction + axis.n + "Axis", layer = "flot-" + axis.direction + "-axis flot-" + axis.direction + axis.n + "-axis " + axis.direction + "Axis " + axis.direction + axis.n + "Axis",
font = axis.options.tickFont || "flot-tick-label tickLabel", labelFont = axisOptions.labelFont || "flot-axis-label axisLabels " + axis.direction + axis.n + "axisLabel",
tickFont = axisOptions.tickFont || "flot-tick-label tickLabel",
tick, x, y, halign, valign; tick, x, y, halign, valign;
surface.removeText(layer); surface.removeText(layer);
if (axisOptions.label) {
if (axis.direction === "x") {
if (axisOptions.position === "top") {
surface.addText(layer, box.left + box.width / 2, box.top, axisOptions.label, labelFont, null, null, "center", "top");
} else {
surface.addText(layer, box.left + box.width / 2, box.top + box.height, axisOptions.label, labelFont, null, null, "center", "bottom");
}
} else {
if (axisOptions.position === "right") {
surface.addText(layer, box.left + box.width, box.top + box.height / 2, axisOptions.label, labelFont, null, null, "right", "middle");
} else {
surface.addText(layer, box.left, box.top + box.height / 2, axisOptions.label, labelFont, null, null, "left", "middle");
}
}
}
// Add labels for the ticks on this axis
for (var i = 0; i < axis.ticks.length; ++i) { for (var i = 0; i < axis.ticks.length; ++i) {
tick = axis.ticks[i]; tick = axis.ticks[i];
...@@ -2208,7 +2269,7 @@ Licensed under the MIT license. ...@@ -2208,7 +2269,7 @@ Licensed under the MIT license.
} }
} }
surface.addText(layer, x, y, tick.label, font, null, null, halign, valign); surface.addText(layer, x, y, tick.label, tickFont, null, null, halign, valign);
} }
}); });
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment