Fine tuning of labels: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
 
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 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'
        }
    });