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