Difference between revisions of "Fine tuning of labels"

From JSXGraph Wiki
Jump to: navigation, search
 
Line 24: Line 24:
 
     });
 
     });
  
var p3 = board.create('point', [2, 3],  
+
var p2 = board.create('point', [2, 3],  
 
     {size:5,  
 
     {size:5,  
 
     label: {  
 
     label: {  
Line 39: Line 39:
  
 
<source lang="css">
 
<source lang="css">
 
+
.myLabel {
 +
    border: 1px solid black;
 +
    border-radius: 3px;
 +
    padding: 2px;
 +
}
 
</source>
 
</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>
  

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'
        }
    });