Polar grid: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
 
(6 intermediate revisions by the same user not shown)
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]});


var ax1 = board.create('axis', [[0,0], [1,0]], {ticks: {type: 'polar', label: {offset:[0, 5]}}});
// Horizontal axis with polar grid lines
var ax2 = board.create('axis', [[0,0], [0,1]], {ticks: {visible: false, label: {visible: true, offset: [5, 0]}}});
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'
        }
    }
});


</jsxgraph>
</jsxgraph>
Line 9: 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 09: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'
        }
    }
});