Difference between revisions of "Fine tuning of labels"

From JSXGraph Wiki
Jump to navigationJump to search
(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...")
 
 
(3 intermediate revisions by the same user not shown)
Line 24: Line 24:
 
     });
 
     });
  
var p3 = board.create('point', [2, 3],  
+
var p2 = board.create('point', [2, 3],  
     {size:20,
+
     {size:5,  
    fillColor: 'none',
 
 
     label: {  
 
     label: {  
         offset: [0, 20],
+
         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 13: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'
        }
    });