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
section. The time plugin (jquery.flot.time.js) is required for time
series support.
The "color" option determines the color of the labels and ticks for
the axis (default is the grid color). For more fine-grained control
you 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 used to draw the labels with CSS or directly via the
"font" option. When "font" is null - the default - each tick label is given the
'flot-tick-label' class. For compatibility with Flot 0.7 and earlier the labels
are also given the 'tickLabel' class, but this is deprecated and scheduled to
be removed with the release of version 1.0.0.
The "color" option determines the color of the line and ticks for the axis, and
defaults to the grid color with transparency. For more fine-grained control you
can also set the color of the ticks separately with "tickColor".
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
tick label is given the 'flot-tick-label' class. For compatibility with Flot
0.7 and earlier the labels 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
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
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.
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
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
......
......@@ -641,14 +641,14 @@ Licensed under the MIT license.
$.extend(true, options, opts);
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)
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
options.xaxis.tickColor = options.grid.tickColor;
if (options.yaxis.tickColor == null) // backwards-compatibility
options.yaxis.tickColor = options.grid.tickColor;
if (options.xaxis.tickColor == null) // grid.tickColor for back-compatibility
options.xaxis.tickColor = options.grid.tickColor || options.xaxis.color;
if (options.yaxis.tickColor == null) // grid.tickColor for back-compatibility
options.yaxis.tickColor = options.grid.tickColor || options.yaxis.color;
if (options.grid.borderColor == null)
options.grid.borderColor = options.grid.color;
......@@ -1849,7 +1849,6 @@ Licensed under the MIT license.
if (!axis.show || axis.ticks.length == 0)
continue;
ctx.strokeStyle = axis.options.tickColor || $.color.parse(axis.options.color).scale('a', 0.22).toString();
ctx.lineWidth = 1;
// find the edges
......@@ -1870,6 +1869,7 @@ Licensed under the MIT license.
// draw tick bar
if (!axis.innermost) {
ctx.strokeStyle = axis.options.color;
ctx.beginPath();
xoff = yoff = 0;
if (axis.direction == "x")
......@@ -1888,6 +1888,9 @@ Licensed under the MIT license.
}
// draw ticks
ctx.strokeStyle = axis.options.tickColor;
ctx.beginPath();
for (i = 0; i < axis.ticks.length; ++i) {
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