Version 3.18.1

APIs

  • Begin typing in the search box above to see results.
Show:

File: charts/js/Gridlines.js

 /**
 * Provides functionality for creating charts.
 *
 * @module charts
 * @submodule charts-base
 */
 var CONFIG = Y.config,
 WINDOW = CONFIG.win,
 DOCUMENT = CONFIG.doc,
 Y_Lang = Y.Lang,
 IS_STRING = Y_Lang.isString,
 _getClassName = Y.ClassNameManager.getClassName,
 SERIES_MARKER = _getClassName("seriesmarker");
 
 /**
 * Gridlines draws gridlines on a Graph.
 *
 * @class Gridlines
 * @constructor
 * @extends Base
 * @uses Renderer
 * @param {Object} config (optional) Configuration parameters.
 * @submodule charts-base
 */
 Y.Gridlines = Y.Base.create("gridlines", Y.Base, [Y.Renderer], {
 /**
 * Reference to the `Path` element used for drawing Gridlines.
 *
 * @property _path
 * @type Path
 * @private
 */
 _path: null,
 
 /**
 * Removes the Gridlines.
 *
 * @method remove
 * @private
 */
 remove: function()
 {
 var path = this._path;
 if(path)
 {
 path.destroy();
 }
 },
 
 /**
 * Draws the gridlines
 *
 * @method draw
 * @protected
 */
 draw: function()
 {
 if(this.get("axis") && this.get("graph"))
 {
 this._drawGridlines();
 }
 },
 
 /**
 * Algorithm for drawing gridlines
 *
 * @method _drawGridlines
 * @private
 */
 _drawGridlines: function()
 {
 var path,
 axis = this.get("axis"),
 axisPosition = axis.get("position"),
 points,
 i = 0,
 l,
 direction = this.get("direction"),
 graph = this.get("graph"),
 w = graph.get("width"),
 h = graph.get("height"),
 line = this.get("styles").line,
 color = line.color,
 weight = line.weight,
 alpha = line.alpha,
 count = this.get("count"),
 length,
 lineFunction;
 if(isFinite(w) && isFinite(h) && w > 0 && h > 0)
 {
 if(count && Y.Lang.isNumber(count))
 {
 points = this._getPoints(count, w, h);
 }
 else if(axisPosition !== "none" && axis && axis.get("tickPoints"))
 {
 points = axis.get("tickPoints");
 }
 else
 {
 points = this._getPoints(axis.get("styles").majorUnit.count, w, h);
 }
 l = points.length;
 path = graph.get("gridlines");
 path.set("width", w);
 path.set("height", h);
 path.set("stroke", {
 weight: weight,
 color: color,
 opacity: alpha
 });
 if(direction === "vertical")
 {
 lineFunction = this._verticalLine;
 length = h;
 }
 else
 {
 lineFunction = this._horizontalLine;
 length = w;
 }
 for(i = 0; i < l; i = i + 1)
 {
 lineFunction(path, points[i], length);
 }
 path.end();
 }
 },
 
 /**
 * Calculates the coordinates for the gridlines based on a count.
 *
 * @method _getPoints
 * @param {Number} count Number of gridlines
 * @return Array
 * @private
 */
 _getPoints: function(count, w, h)
 {
 var i,
 points = [],
 multiplier,
 divisor = count - 1;
 for(i = 0; i < count; i = i + 1)
 {
 multiplier = i/divisor;
 points[i] = {
 x: w * multiplier,
 y: h * multiplier
 };
 }
 return points;
 },
 
 /**
 * Algorithm for horizontal lines.
 *
 * @method _horizontalLine
 * @param {Path} path Reference to path element
 * @param {Object} pt Coordinates corresponding to a major unit of an axis.
 * @param {Number} w Width of the Graph
 * @private
 */
 _horizontalLine: function(path, pt, w)
 {
 path.moveTo(0, pt.y);
 path.lineTo(w, pt.y);
 },
 
 /**
 * Algorithm for vertical lines.
 *
 * @method _verticalLine
 * @param {Path} path Reference to path element
 * @param {Object} pt Coordinates corresponding to a major unit of an axis.
 * @param {Number} h Height of the Graph
 * @private
 */
 _verticalLine: function(path, pt, h)
 {
 path.moveTo(pt.x, 0);
 path.lineTo(pt.x, h);
 },
 
 /**
 * Gets the default value for the `styles` attribute. Overrides
 * base implementation.
 *
 * @method _getDefaultStyles
 * @return Object
 * @protected
 */
 _getDefaultStyles: function()
 {
 var defs = {
 line: {
 color:"#f0efe9",
 weight: 1,
 alpha: 1
 }
 };
 return defs;
 }
 
 },
 {
 ATTRS: {
 /**
 * Indicates the direction of the gridline.
 *
 * @attribute direction
 * @type String
 */
 direction: {},
 
 /**
 * Indicate the `Axis` in which to bind
 * the gridlines.
 *
 * @attribute axis
 * @type Axis
 */
 axis: {},
 
 /**
 * Indicates the `Graph` in which the gridlines
 * are drawn.
 *
 * @attribute graph
 * @type Graph
 */
 graph: {},
 
 /**
 * Indicates the number of gridlines to display. If no value is set, gridlines will equal the number of ticks in
 * the corresponding axis.
 *
 * @attribute count
 * @type Number
 */
 count: {}
 }
 });
 
 

AltStyle によって変換されたページ (->オリジナル) /