From 3cd7a51026bc0fd10030a5bc133bf487d2a75059 Mon Sep 17 00:00:00 2001 From: David Schnur Date: Wed, 6 Mar 2013 21:15:26 -0500 Subject: [PATCH] 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. --- API.md | 20 +++++++++----------- NEWS.md | 6 ++++++ jquery.flot.js | 17 ++++++++++------- 3 files changed, 25 insertions(+), 18 deletions(-) diff --git a/API.md b/API.md index edf77b48..2e536da9 100644 --- a/API.md +++ b/API.md @@ -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 diff --git a/NEWS.md b/NEWS.md index dd85d716..ecb1eaa4 100644 --- a/NEWS.md +++ b/NEWS.md @@ -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 diff --git a/jquery.flot.js b/jquery.flot.js index 69e2f632..95f06e67 100644 --- a/jquery.flot.js +++ b/jquery.flot.js @@ -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;