Fine tuning of labels: Difference between revisions
From JSXGraph Wiki
A WASSERMANN (talk | contribs) (Created page with "Center the position of labels and use custum CSS styles for labels. <html> <style type="text/css"> .myLabel { border: 1px solid black; border-radius: 3px; padding: 2p...") |
A WASSERMANN (talk | contribs) No edit summary |
||
(3 intermediate revisions by the same user not shown) | |||
Line 24: | Line 24: | ||
}); | }); | ||
var | var p2 = board.create('point', [2, 3], | ||
{size: | {size:5, | ||
label: { | label: { | ||
offset: [0, | offset: [0, 10], | ||
anchorX: 'middle', | anchorX: 'middle', | ||
anchorY: 'bottom', | anchorY: 'bottom', | ||
Line 38: | Line 37: | ||
===The underlying JavaScript code=== | ===The underlying JavaScript code=== | ||
<source lang="css"> | |||
.myLabel { | |||
border: 1px solid black; | |||
border-radius: 3px; | |||
padding: 2px; | |||
} | |||
</source> | |||
<source lang="javascript"> | <source lang="javascript"> | ||
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 5, 5, -1], | |||
axis: true, showcopyright: true, shownavigation: true}); | |||
var p1 = board.create('point', [-2, 3], | |||
{size:20, | |||
fillColor: 'none', | |||
label: { | |||
offset: [0, 0], | |||
anchorX: 'middle', | |||
anchorY: 'middle', | |||
} | |||
}); | |||
var p2 = board.create('point', [2, 3], | |||
{size:5, | |||
label: { | |||
offset: [0, 10], | |||
anchorX: 'middle', | |||
anchorY: 'bottom', | |||
cssClass: 'myLabel', | |||
highlightCssClass: 'myLabel' | |||
} | |||
}); | |||
</source> | </source> | ||
[[Category:Examples]] | [[Category:Examples]] | ||
[[Category:Text]] | [[Category:Text]] |
Latest revision as of 11:24, 9 April 2014
Center the position of labels and use custum CSS styles for labels.
The underlying JavaScript code
.myLabel {
border: 1px solid black;
border-radius: 3px;
padding: 2px;
}
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 5, 5, -1],
axis: true, showcopyright: true, shownavigation: true});
var p1 = board.create('point', [-2, 3],
{size:20,
fillColor: 'none',
label: {
offset: [0, 0],
anchorX: 'middle',
anchorY: 'middle',
}
});
var p2 = board.create('point', [2, 3],
{size:5,
label: {
offset: [0, 10],
anchorX: 'middle',
anchorY: 'bottom',
cssClass: 'myLabel',
highlightCssClass: 'myLabel'
}
});