Difference between revisions of "Polar grid"

From JSXGraph Wiki
Jump to navigationJump to search
 
Line 2: Line 2:
 
var board = JXG.JSXGraph.initBoard('jxgbox', {axis:false, boundingbox:[-5, 5, 5, -5]});
 
var board = JXG.JSXGraph.initBoard('jxgbox', {axis:false, boundingbox:[-5, 5, 5, -5]});
  
 +
// Horizontal axis with polar grid lines
 
var ax1 = board.create('axis', [[0,0], [1,0]], {
 
var ax1 = board.create('axis', [[0,0], [1,0]], {
 
     ticks: {
 
     ticks: {
         type: 'polar',  
+
         type: 'polar',         // Polar grid
         label: {
+
         label: {               // Place the labels centered on the grid lines
 
             offset:[0, -3],  
 
             offset:[0, -3],  
 
             anchorX: 'middle',  
 
             anchorX: 'middle',  
Line 12: Line 13:
 
     }
 
     }
 
});
 
});
 +
 +
// Vertical axis with horizontal ticks
 
var ax2 = board.create('axis', [[0,0], [0,1]], {
 
var ax2 = board.create('axis', [[0,0], [0,1]], {
 
     ticks: {
 
     ticks: {
         majorHeight: 0,  
+
         majorHeight: 0,       // Do not show the grid lines
         tickEndings: [1, 0],
+
         tickEndings: [1, 0],   // Let the ticks point to the left
         label: {
+
         label: {               // Position of the labels
 
             visible: true,  
 
             visible: true,  
 
             offset: [-6, 0],  
 
             offset: [-6, 0],  
Line 29: Line 32:
 
===The underlying JavaScript code===
 
===The underlying JavaScript code===
 
<source lang="javascript">
 
<source lang="javascript">
 +
var board = JXG.JSXGraph.initBoard('jxgbox', {axis:false, boundingbox:[-5, 5, 5, -5]});
 +
 +
// Horizontal axis with polar grid lines
 +
var ax1 = board.create('axis', [[0,0], [1,0]], {
 +
    ticks: {
 +
        type: 'polar',        // Polar grid
 +
        label: {              // Place the labels centered on the grid lines
 +
            offset:[0, -3],
 +
            anchorX: 'middle',
 +
            anchorY: 'top'
 +
        }
 +
    }
 +
});
 +
 +
// Vertical axis with horizontal ticks
 +
var ax2 = board.create('axis', [[0,0], [0,1]], {
 +
    ticks: {
 +
        majorHeight: 0,        // Do not show the grid lines
 +
        tickEndings: [1, 0],  // Let the ticks point to the left
 +
        label: {              // Position of the labels
 +
            visible: true,
 +
            offset: [-6, 0],
 +
            anchorY: 'middle',
 +
            anchorX: 'right'
 +
        }
 +
    }
 +
});
 
</source>
 
</source>
  
 
[[Category:Examples]]
 
[[Category:Examples]]
 
[[Category:Calculus]]
 
[[Category:Calculus]]

Latest revision as of 10:42, 31 March 2020

The underlying JavaScript code

var board = JXG.JSXGraph.initBoard('jxgbox', {axis:false, boundingbox:[-5, 5, 5, -5]});

// Horizontal axis with polar grid lines
var ax1 = board.create('axis', [[0,0], [1,0]], {
    ticks: {
        type: 'polar',         // Polar grid
        label: {               // Place the labels centered on the grid lines 
            offset:[0, -3], 
            anchorX: 'middle', 
            anchorY: 'top'
        }
    }
});

// Vertical axis with horizontal ticks
var ax2 = board.create('axis', [[0,0], [0,1]], {
    ticks: {
        majorHeight: 0,        // Do not show the grid lines 
        tickEndings: [1, 0],   // Let the ticks point to the left
        label: {               // Position of the labels
            visible: true, 
            offset: [-6, 0], 
            anchorY: 'middle', 
            anchorX: 'right'
        }
    }
});