Added support for flot standard axis.font settings

README

@@ -10,9 +10,25 @@ is still right-side-up.
 
 Angles greater than or equal to 180 are ignored.
 
-If set, xaxis.rotateTicksFont is used for the ticks font.  Otherwise, the
-CSS font property for the tickLabel class is used.  If neither is set, the
-default is 'smaller sans-serif'.
+If the standard flot xaxis.font settings object is present, that is 
+used for formatting the tick labels.
+Eg:
+xaxis {
+  font: {
+  	size: 12, /* Expressed in pixels */
+  	style: "italic",
+  	weight: "bold",
+  	family: "sans-serif",
+  	variant: "small-caps",
+  	color: "#545454"
+  }
+}
+
+If set, xaxis.rotateTicksFont is used for the ticks font.  This follows the 
+canvas API font style specification format.
+
+Otherwise, the CSS font property for the tickLabel class is used.  If none
+are set, the default is 'smaller sans-serif'.
 
 The graph is resized so that all labels can be displayed properly.
 - NOTE: currently this only works with label angle > 90 degrees.

jquery.flot.tickrotor.js

@@ -1,4 +1,5 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
@@ -28,7 +29,7 @@
         // them, and then have it draw it again.
 
         var ticks = [];  // preserve between draw() calls.
-        var font;
+        var font = null, size = null, weight = null, color = null, variant = null, fontStyle = null, labelCSS = '', canvasFontStyleStr = '';
         var secondPass = false;
         var rotateTicks, rotateTicksRads, radsAboveHoriz;
 
@@ -52,14 +53,54 @@
                     radsAboveHoriz = Math.PI/2 - rotateTicksRads;
                 }
 
-                font = opts.rotateTicksFont;
+                //Look for standard Flot tick label formatting settings
+                if (opts.font !== undefined) {
+                	if (opts.font.size !== undefined) size = opts.font.size;
+                	if (opts.font.color !== undefined) color = opts.font.color;
+                	if (opts.font.weight !== undefined) weight = opts.font.weight;
+                	if (opts.font.family !== undefined) font = opts.font.family;
+                	if (opts.font.variant !== undefined) variant = opts.font.variant;
+                	if (opts.font.style !== undefined) fontStyle = opts.font.style;
+                }
+
+                //Backwards compatibility with original tickrotaor plugin font face setting
+                if (opts.rotateTicksFont !== undefined) {
+                	font = opts.rotateTicksFont;
+                }
+
+                //Apply defaults for undefined format settings
                 if (!font) {
                     font = $('.tickLabel').css('font');
                 }
                 if (!font) {
                     font = 'smaller sans-serif';
                 }
 
+                //Build CSS style string and canvas API font style string
+                //The order elements are appended to canvasFontStyleStr is important as the canvas API makes assumptions about order.
+                if(color){
+                	labelCSS += 'color: ' + color + '; ';
+                	//canvasFontStyleStr += ' ' + color; //Not supported here. See ctx.fileStyle below.
+                }
+                if(weight){
+                	labelCSS += 'font-weight: ' + weight + '; ';
+                	canvasFontStyleStr += ' ' + weight;
+                }
+                if(variant){
+                	labelCSS += 'font-variant: ' + variant + '; ';
+                	canvasFontStyleStr += ' ' + variant;
+                }
+                if(fontStyle){
+                	labelCSS += 'font-style: ' + fontStyle + '; ';
+                	canvasFontStyleStr += ' ' + fontStyle;
+                }
+                if(size){
+                	labelCSS += 'font-size: ' + size + 'px; ';
+                	canvasFontStyleStr += ' ' + size + 'px';
+                }
+                labelCSS += 'font-family: ' + font + '; ';
+                canvasFontStyleStr += ' ' + font;
+
                 var elem, maxLabelWidth = 0, maxLabelHeight = 0, minX = 0, maxX = 0;
 
                 // We have to clear the ticks option so that flot core
@@ -78,7 +119,7 @@
 
                 var x;
                 for (var i = 0; i < ticks.length; i++) {
-                  elem = $('<span style="font:' + font + '">' + ticks[i].label + '</span>');
+                  elem = $('<span style="' + labelCSS + '">' + ticks[i].label + '</span>');
                   plot.getPlaceholder().append(elem);
                   ticks[i].height = elem.outerHeight(true);
                   ticks[i].width = elem.outerWidth(true);
@@ -151,7 +192,10 @@
                         continue;
                     }
                     ctx.save();
-                    ctx.font = font;
+
+                    ctx.font = canvasFontStyleStr;
+            		ctx.fillStyle = color;
+
                     if (rotateTicks <= 90) {
                         // Center such that the top of the label is at the center of the tick.
                         xoffset = -Math.ceil(Math.cos(radsAboveHoriz) * tick.height);