Commit 3cd7a510 authored by David Schnur's avatar David Schnur

Axis and tick color options now make more sense.

The axis color now controls the color of the axis line, instead of its
ticks and labels, while the tickColor controls the tick color. This
makes a little more sense and provides the minor feature of being able
to change the axis line color separately from that of its ticks.  Pull
request #917 ought to be easier to merge now, too.
parent 6e3cc91f
...@@ -269,17 +269,15 @@ numbers. Use "time" for time series data; see the time series data ...@@ -269,17 +269,15 @@ numbers. Use "time" for time series data; see the time series data
section. The time plugin (jquery.flot.time.js) is required for time section. The time plugin (jquery.flot.time.js) is required for time
series support. series support.
The "color" option determines the color of the labels and ticks for The "color" option determines the color of the line and ticks for the axis, and
the axis (default is the grid color). For more fine-grained control defaults to the grid color with transparency. For more fine-grained control you
you can also set the color of the ticks separately with "tickColor" can also set the color of the ticks separately with "tickColor".
(otherwise it's autogenerated as the base color with some
transparency). You can customize the font and color used to draw the axis tick labels with CSS
or directly via the "font" option. When "font" is null - the default - each
You can customize the font used to draw the labels with CSS or directly via the tick label is given the 'flot-tick-label' class. For compatibility with Flot
"font" option. When "font" is null - the default - each tick label is given the 0.7 and earlier the labels are also given the 'tickLabel' class, but this is
'flot-tick-label' class. For compatibility with Flot 0.7 and earlier the labels deprecated and scheduled to be removed with the release of version 1.0.0.
are also given the 'tickLabel' class, but this is deprecated and scheduled to
be removed with the release of version 1.0.0.
To enable more granular control over styles, labels are divided between a set To enable more granular control over styles, labels are divided between a set
of text containers, with each holding the labels for one axis. These containers of text containers, with each holding the labels for one axis. These containers
......
...@@ -23,6 +23,12 @@ The text containers for each axis now use the classes 'flot-[x|y]-axis' and ...@@ -23,6 +23,12 @@ The text containers for each axis now use the classes 'flot-[x|y]-axis' and
with Flot 0.7 and earlier text will continue to use the old classes as well, with Flot 0.7 and earlier text will continue to use the old classes as well,
but they are considered deprecated and will be removed in a future version. but they are considered deprecated and will be removed in a future version.
In previous versions the axis 'color' option was used to set the color of tick
marks and their label text. It now controls the color of the axis line, which
previously could not be changed separately, and continues to act as a default
for the tick-mark color. The color of tick label text is now set either by
overriding the 'flot-tick-label' CSS rule or via the axis 'font' option.
A new plugin, jquery.flot.canvas.js, allows axis tick labels to be rendered A new plugin, jquery.flot.canvas.js, allows axis tick labels to be rendered
directly to the canvas, rather than using HTML elements. This feature can be directly to the canvas, rather than using HTML elements. This feature can be
toggled with a simple option, making it easy to create interactive plots in the toggled with a simple option, making it easy to create interactive plots in the
......
...@@ -641,14 +641,14 @@ Licensed under the MIT license. ...@@ -641,14 +641,14 @@ Licensed under the MIT license.
$.extend(true, options, opts); $.extend(true, options, opts);
if (options.xaxis.color == null) if (options.xaxis.color == null)
options.xaxis.color = options.grid.color; options.xaxis.color = $.color.parse(options.grid.color).scale('a', 0.22).toString();
if (options.yaxis.color == null) if (options.yaxis.color == null)
options.yaxis.color = options.grid.color; options.yaxis.color = $.color.parse(options.grid.color).scale('a', 0.22).toString();
if (options.xaxis.tickColor == null) // backwards-compatibility if (options.xaxis.tickColor == null) // grid.tickColor for back-compatibility
options.xaxis.tickColor = options.grid.tickColor; options.xaxis.tickColor = options.grid.tickColor || options.xaxis.color;
if (options.yaxis.tickColor == null) // backwards-compatibility if (options.yaxis.tickColor == null) // grid.tickColor for back-compatibility
options.yaxis.tickColor = options.grid.tickColor; options.yaxis.tickColor = options.grid.tickColor || options.yaxis.color;
if (options.grid.borderColor == null) if (options.grid.borderColor == null)
options.grid.borderColor = options.grid.color; options.grid.borderColor = options.grid.color;
...@@ -1849,7 +1849,6 @@ Licensed under the MIT license. ...@@ -1849,7 +1849,6 @@ Licensed under the MIT license.
if (!axis.show || axis.ticks.length == 0) if (!axis.show || axis.ticks.length == 0)
continue; continue;
ctx.strokeStyle = axis.options.tickColor || $.color.parse(axis.options.color).scale('a', 0.22).toString();
ctx.lineWidth = 1; ctx.lineWidth = 1;
// find the edges // find the edges
...@@ -1870,6 +1869,7 @@ Licensed under the MIT license. ...@@ -1870,6 +1869,7 @@ Licensed under the MIT license.
// draw tick bar // draw tick bar
if (!axis.innermost) { if (!axis.innermost) {
ctx.strokeStyle = axis.options.color;
ctx.beginPath(); ctx.beginPath();
xoff = yoff = 0; xoff = yoff = 0;
if (axis.direction == "x") if (axis.direction == "x")
...@@ -1888,6 +1888,9 @@ Licensed under the MIT license. ...@@ -1888,6 +1888,9 @@ Licensed under the MIT license.
} }
// draw ticks // draw ticks
ctx.strokeStyle = axis.options.tickColor;
ctx.beginPath(); ctx.beginPath();
for (i = 0; i < axis.ticks.length; ++i) { for (i = 0; i < axis.ticks.length; ++i) {
var v = axis.ticks[i].v; var v = axis.ticks[i].v;
......
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