Element Ticks
JXG.GeometryElement
↳ JXG.Ticks
↳ Ticks
Ticks are used as distance markers on a line or curve.
They are
mainly used for axis elements and slider elements. Ticks may stretch infinitely
or finitely, which can be set with Ticks#majorHeight and Ticks#minorHeight.
Defined in: ticks.js.
Extends
JXG.Ticks.
Constructor Attributes | Constructor Name and Description |
---|---|
Ticks are markers on straight line elements or curves.
|
Field Attributes | Field Name and Description |
---|---|
Determine the position of the tick with value 0.
|
|
Format tick labels that were going to have scientific notation
like 5.00e+6 to look like 5•10⁶.
|
|
If a label exceeds Ticks#maxLabelLength this determines the number of digits used to shorten the tick label.
|
|
Draw labels yes/no
|
|
Draw the zero tick, that lies at line.point1?
|
|
A function that expects two JXG.Coords, the first one representing the coordinates of the
tick that is to be labeled, the second one the coordinates of the center (the tick with position 0).
|
|
<deprecated> |
A function that expects two JXG.Coords, the first one representing the coordinates of the
tick that is to be labeled, the second one the coordinates of the center (the tick with position 0).
|
If true, ignore the tick endings attribute for infinite (full height) ticks.
|
|
Whether line boundaries should be counted or not in the lower and upper bounds when
creating ticks.
|
|
If the distance between two ticks is too big we could insert new ticks.
|
|
Attributes for the ticks labels
|
|
User defined labels for special ticks.
|
|
Total height of a major tick.
|
|
Decides in which direction major ticks are visible.
|
|
The maximum number of characters a tick label can use.
|
|
Total height of a minor tick.
|
|
The number of minor ticks between two major ticks.
|
|
Minimum distance in pixel of equidistant ticks in case insertTicks==true.
|
|
If a label exceeds Ticks#maxLabelLength this determines the precision used to shorten the tick label.
|
|
Scale the ticks but not the tick labels.
|
|
A string that is appended to every tick, used to represent the scale
factor given in Ticks#scale.
|
|
Decides in which direction minor ticks are visible.
|
|
The default distance (in user coordinates, not pixels) between two ticks.
|
|
By default, i.e.
|
|
Set the ticks type.
|
|
Use the unicode character 0x2212, i.e.
|
- Methods borrowed from class JXG.Ticks:
- _isInsideCanvas, adjustTickDistance, beautifyScientificNotationLabel, calculateTicksCoordinates, createTickPath, formatLabelText, generateEquidistantTicks, generateFixedTicks, generateLabelData, getDistanceFromZero, getLowerAndUpperBounds, getXandYdeltas, getZeroCoordinates, hasPoint, makeTicksFunction, processTickPosition, setPositionDirectly, setTicksSizeVariables, update, updateRenderer, updateRendererLabels
- Methods borrowed from class JXG.GeometryElement:
- _set, addChild, addDescendants, addParents, addParentsFromJCFunctions, addRotation, addTicks, addTransform, animate, bounds, clearTrace, cloneToBackground, countChildren, createGradient, createLabel, draggable, fullUpdate, generatePolynomial, getAttribute, getAttributes, getLabelAnchor, getName, getParents, getProperty, getSnapSizes, getTextAnchor, getType, handleSnapToGrid, hide, hideElement, labelColor, noHighlight, normalize, prepareUpdate, remove, removeAllTicks, removeChild, removeDescendants, removeTicks, resolveShortcuts, setArrow, setAttribute, setDash, setDisplayRendNode, setLabel, setLabelText, setName, setParents, setPosition, setProperty, show, showElement, snapToPoints, updateVisibility
- Events borrowed from class JXG.GeometryElement:
- attribute, attribute:key, down, drag, keydrag, mousedown, mousedrag, mousemove, mouseout, mouseover, mouseup, move, out, over, pendown, pendrag, penup, touchdown, touchdrag, touchup, up
Element Detail
Ticks
Ticks are markers on straight line elements or curves.
-
This element has no direct constructor. To create an instance of this element you have to call JXG.Board#create
with type "ticks".
- Possible parent array combinations are:
-
{JXG.Line|JXG.Curve} line
- The parents consist of the line or curve the ticks are going to be attached to.
-
{Number|Array} distance
- Number defining the distance between two major ticks or an array defining static ticks. In case a number is specified, the ticks are equidistant, in case of an array, a fixed number of static ticks is created at user-supplied positions. Alternatively, the distance can be specified with the attribute "ticksDistance". For arbitrary lines (and not axes) a "zero coordinate" is determined which defines where the first tick is positioned. This zero coordinate can be altered with the attribute "anchor". Possible values are "left", "middle", "right" or a number. The default value is "left".
- Throws:
- {Exception}
- If the element cannot be constructed with the given parent objects an exception is thrown.
- Examples:
// Create an axis providing two coordinate pairs. var p1 = board.create('point', [0, 3]); var p2 = board.create('point', [1, 3]); var l1 = board.create('line', [p1, p2]); var t = board.create('ticks', [l1], {ticksDistance: 2});
Attribute Detail
{String}
anchor
Determine the position of the tick with value 0. 'left' means point1 of the line, 'right' means point2,
and 'middle' is equivalent to the midpoint of the defining points. This attribute is ignored if the parent
line is of type axis.
Defined in: options.js.
Defined in: options.js.
- Default Value:
- 'left'
{Boolean}
beautifulScientificTickLabels
Format tick labels that were going to have scientific notation
like 5.00e+6 to look like 5•10⁶.
Defined in: options.js.
Defined in: options.js.
var board = JXG.JSXGraph.initBoard("jxgbox", { boundingbox: [-500000, 500000, 500000, -500000], axis: true, defaultAxes: { x: { scalable: true, ticks: { beautifulScientificTickLabels: true }, }, y: { scalable: true, ticks: { beautifulScientificTickLabels: true }, } }, });
- Default Value:
- false
{Number}
digits
If a label exceeds Ticks#maxLabelLength this determines the number of digits used to shorten the tick label.
Defined in: options.js.
Defined in: options.js.
- See:
- Ticks#maxLabelLength
- Default Value:
- 3
{Boolean}
drawLabels
Draw labels yes/no
Defined in: options.js.
Defined in: options.js.
- Default Value:
- false
{Boolean}
drawZero
Draw the zero tick, that lies at line.point1?
Defined in: options.js.
Defined in: options.js.
- Default Value:
- false
{function}
generateLabelText
A function that expects two JXG.Coords, the first one representing the coordinates of the
tick that is to be labeled, the second one the coordinates of the center (the tick with position 0).
The third parameter is a null, number or a string. In the latter two cases, this value is taken.
Returns a string.
Defined in: options.js.
Defined in: options.js.
{function}
generateLabelValue
A function that expects two JXG.Coords, the first one representing the coordinates of the
tick that is to be labeled, the second one the coordinates of the center (the tick with position 0).
Defined in: options.js.
Defined in: options.js.
- Deprecated:
- Use JGX.Options@generateLabelText
{Boolean}
ignoreInfiniteTickEndings
If true, ignore the tick endings attribute for infinite (full height) ticks.
This affects major and minor ticks.
Defined in: options.js.
Defined in: options.js.
- Default Value:
- true
{Boolean}
includeBoundaries
Whether line boundaries should be counted or not in the lower and upper bounds when
creating ticks.
Defined in: options.js.
Defined in: options.js.
- Default Value:
- false
{Boolean}
insertTicks
If the distance between two ticks is too big we could insert new ticks. If insertTicks
is true, we'll do so, otherwise we leave the distance as is.
This option is ignored if equidistant is false. In the example below the distance between
two ticks is given as 1 but because insertTicks is set to true many ticks will
be omitted in the rendering process to keep the display clear.
Defined in: options.js.
Defined in: options.js.
// Create an axis providing two coord pairs. var p1 = board.create('point', [0, 0]); var p2 = board.create('point', [50, 25]); var l1 = board.create('line', [p1, p2]); var t = board.create('ticks', [l1, 1], { insertTicks: true, majorHeight: -1, label: { offset: [4, -9] }, drawLabels: true });
- Default Value:
- false
{Object}
label
Attributes for the ticks labels
Defined in: options.js.
Defined in: options.js.
{Array}
labels
User defined labels for special ticks. Instead of the i-th tick's position, the i-th string stored in this array
is shown. If the number of strings in this array is less than the number of special ticks, the tick's position is
shown as a fallback.
Defined in: options.js.
Defined in: options.js.
- Default Value:
- []
{Number}
majorHeight
Total height of a major tick. If negative the full height of the board is taken.
Defined in: options.js.
Defined in: options.js.
- Default Value:
- 10
{Array}
majorTickEndings
Decides in which direction major ticks are visible. Possible values are either the constants
0=false or 1=true or a function returning 0 or 1.
In case of [0,1] the tick is only visible to the right of the line. In case of
[1,0] the tick is only visible to the left of the line.
Defined in: options.js.
Defined in: options.js.
var board = JXG.JSXGraph.initBoard("jxgbox", { boundingbox: [-5, 5, 5, -5], axis: true, defaultAxes: { x: { ticks: { majorTickEndings: [1, 0], ignoreInfiniteTickEndings: false } }, y: { ticks: { majorTickEndings: [0, 1], ignoreInfiniteTickEndings: false } } } }); var p = board.create('point', [1, 1]); var l = board.create('line', [1, -1, 1]);
- Default Value:
- [1, 1]
{Number}
maxLabelLength
The maximum number of characters a tick label can use.
Defined in: options.js.
Defined in: options.js.
- See:
- Ticks#precision
- Default Value:
- 5
{Number}
minorHeight
Total height of a minor tick. If negative the full height of the board is taken.
Defined in: options.js.
Defined in: options.js.
- Default Value:
- 4
{Number}
minorTicks
The number of minor ticks between two major ticks.
Defined in: options.js.
Defined in: options.js.
- Default Value:
- 4
minTicksDistance
Minimum distance in pixel of equidistant ticks in case insertTicks==true.
Defined in: options.js.
Defined in: options.js.
- See:
- Ticks#insertTicks
{Number}
precision
If a label exceeds Ticks#maxLabelLength this determines the precision used to shorten the tick label.
Replaced by the digits attribute.
Defined in: options.js.
Defined in: options.js.
- Default Value:
- 3
{Number}
scale
Scale the ticks but not the tick labels.
Defined in: options.js.
Defined in: options.js.
- See:
- Ticks#scaleSymbol
- Default Value:
- 1
{String}
scaleSymbol
A string that is appended to every tick, used to represent the scale
factor given in Ticks#scale.
Defined in: options.js.
Defined in: options.js.
- See:
- Ticks#scale
- Default Value:
- ''
{Array}
tickEndings
Decides in which direction minor ticks are visible. Possible values are either the constants
0=false or 1=true or a function returning 0 or 1.
In case of [0,1] the tick is only visible to the right of the line. In case of
[1,0] the tick is only visible to the left of the line.
Defined in: options.js.
Defined in: options.js.
- Default Value:
- [1, 1]
{Number}
ticksDistance
The default distance (in user coordinates, not pixels) between two ticks. Please be aware that this value does not have
to be used if Ticks#insertTicks is set to true.
Defined in: options.js.
Defined in: options.js.
- See:
- Ticks#insertTicks
- Default Value:
- 1
ticksPerLabel
By default, i.e. if ticksPerLabel==false, labels are generated for major ticks, only.
If ticksPerLabel is set to a(n integer) number, this denotes the number of minor ticks
between two labels.
Defined in: options.js.
Defined in: options.js.
const board = JXG.JSXGraph.initBoard('jxgbox', { boundingbox: [-4, 4, 4, -4], axis: true, defaultAxes: { x: { ticks: { minorTicks: 7, ticksPerLabel: 4, minorHeight: 20, } }, y: { ticks: { minorTicks: 3, ticksPerLabel: 2, minorHeight: 20 } } } });
- Default Value:
- false
{String}
type
Set the ticks type.
Possible values are 'linear' or 'polar'.
Defined in: options.js.
Defined in: options.js.
- Default Value:
- 'linear'
{Boolean}
useUnicodeMinus
Use the unicode character 0x2212, i.e. the HTML entity − as minus sign.
That is −1 instead of -1.
Defined in: options.js.
Defined in: options.js.
- Default Value:
- true
Attributes borrowed from other Elements
- Attributes borrowed from class JXG.GeometryElement:
- dash, draft, dragToTopOfLayer, fillColor, fillOpacity, fixed, frozen, gradient, gradientAngle, gradientCX, gradientCY, gradientEndOffset, gradientFR, gradientFX, gradientFY, gradientR, gradientSecondColor, gradientSecondOpacity, gradientStartOffset, highlight, highlightFillColor, highlightFillOpacity, highlightStrokeColor, highlightStrokeOpacity, highlightStrokeWidth, needsRegularUpdate, rotatable, scalable, shadow, snapToGrid, strokeColor, strokeOpacity, strokeWidth, tabindex, trace, traceAttributes, transitionDuration, transitionProperties, visible, withLabel
Fields borrowed from other Elements
- Fields borrowed from class JXG.Ticks:
- board, equidistant, fixedTicks, labelCounter, labelData, line, ticks, ticksDelta, ticksFunction
- Fields borrowed from class JXG.GeometryElement:
- _org_type, _pos, ancestors, baseElement, childElements, descendants, dump, elementClass, elType, hasLabel, highlighted, id, inherits, isDraggable, isReal, lastDragTime, methodMap, mouseover, name, needsUpdate, notExistingParents, numTraces, parents, quadraticform, rendNode, stdform, subs, symbolic, traces, transformations, visProp, visPropCalc
Methods borrowed from other Elements
- Methods borrowed from class JXG.Ticks:
- _isInsideCanvas, adjustTickDistance, beautifyScientificNotationLabel, calculateTicksCoordinates, createTickPath, formatLabelText, generateEquidistantTicks, generateFixedTicks, generateLabelData, getDistanceFromZero, getLowerAndUpperBounds, getXandYdeltas, getZeroCoordinates, hasPoint, makeTicksFunction, processTickPosition, setPositionDirectly, setTicksSizeVariables, update, updateRenderer, updateRendererLabels
- Methods borrowed from class JXG.GeometryElement:
- _set, addChild, addDescendants, addParents, addParentsFromJCFunctions, addRotation, addTicks, addTransform, animate, bounds, clearTrace, cloneToBackground, countChildren, createGradient, createLabel, draggable, fullUpdate, generatePolynomial, getAttribute, getAttributes, getLabelAnchor, getName, getParents, getProperty, getSnapSizes, getTextAnchor, getType, handleSnapToGrid, hide, hideElement, labelColor, noHighlight, normalize, prepareUpdate, remove, removeAllTicks, removeChild, removeDescendants, removeTicks, resolveShortcuts, setArrow, setAttribute, setDash, setDisplayRendNode, setLabel, setLabelText, setName, setParents, setPosition, setProperty, show, showElement, snapToPoints, updateVisibility
Events borrowed from other Elements