CODEWITHSUNDEEP
javascripthtmlgraphicslabeljsxgraph
Vinod
Vinod

Reputation: 4352

JSXGraph - Circle with ticks and ticklabels

I have a piece of code here:

<html>
<head>
 <link rel="stylesheet" type="text/css" href="https://jsxgraph.org/distrib/jsxgraph.css" />
 <script type="text/javascript" src="https://jsxgraph.org/distrib/jsxgraphcore.js"></script>
</head>

<body>
<div id="box" class="jxgbox" style="width:500px; height:500px;"></div>

<script type="text/javascript">
var brd = JXG.JSXGraph.initBoard('box',{axis:false,boundingbox:[-10,10,10,-10],keepaspectratio:true});

var p = brd.create('point', [0,0]);
var q = brd.create('point', [10,0]);
var circ = brd.create('circle', [p, q]);

// Create an empty curve
var ticks = brd.create('curve', [[0], [0]], 
             {labels: ['0','30','60','90','120','150','180','210','240','270','300','330'],           
              strokeWidth: 1, 
              strokeColor: 'blue',
              strokeOpacity: 0.5,
              drawLabels: true,
              label: {offset: [-0.5,-0.5], anchorX: 'middle', anchorY: 'top'}});

// Make ticks out of the curve 
ticks.updateDataArray = function() {
    var cx = circ.center.X(),
        cy = circ.center.Y(),
        r = circ.Radius(),
        i, 
        ticklen = 0.3,           // Length of ticks in user space coordinates
        steps = 12,              // Number of ticks
        d = ticklen * 0.5,
        alpha = 2 * Math.PI / steps;

    this.dataX = [];
    this.dataY = [];
    for (i = 0; i < steps; i++) {
        // Start of a tick
        this.dataX.push( cx + (r - d)* Math.cos(i * alpha) );
        this.dataY.push( cy + (r - d) * Math.sin(i * alpha) );
        // End of tick
        this.dataX.push( cx + (r + d) * Math.cos(i * alpha) );
        this.dataY.push( cy + (r + d) * Math.sin(i * alpha) );
        // Interrupt the curve
        this.dataX.push( NaN );
        this.dataY.push( NaN );
    }
};
brd.update();
</script>
</body>

</html>

The tick labels are not getting displayed on the JSXGraph. What is the solution?

Upvotes: 0

Views: 72

Answers (1)

Alfred Wassermann
Alfred Wassermann

Reputation: 2323

In this example, the labels have to be created as separate texts, like this:

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

var p = board.create('point', [0,0]);
var q = board.create('point', [8,0]);
var circ = board.create('circle', [p, q]);

// Create an empty curve
var ticks = board.create('curve', [[0], [0]], 
        {strokeWidth: 1, 
         strokeColor: 'blue',
         strokeOpacity: 0.5,
         drawLabels: true
        });

// Make ticks out of the curve 
ticks.updateDataArray = function() {
    var cx = circ.center.X(),
        cy = circ.center.Y(),
        r = circ.Radius(),
        i, 
        ticklen = 0.3,           // Length of ticks in user space coordinates
        steps = 12,              // Number of ticks
        d = ticklen * 0.5,
        alpha = 2 * Math.PI / steps;

    this.dataX = [];
    this.dataY = [];
    for (i = 0; i < steps; i++) {
        // Start of a tick
        this.dataX.push( cx + (r - d)* Math.cos(i * alpha) );
        this.dataY.push( cy + (r - d) * Math.sin(i * alpha) );
        // End of tick
        this.dataX.push( cx + (r + d) * Math.cos(i * alpha) );
        this.dataY.push( cy + (r + d) * Math.sin(i * alpha) );
        // Interrupt the curve
        this.dataX.push( NaN );
        this.dataY.push( NaN );
    }
};
board.update();

var labels =  ['0','30','60','90','120','150','180','210','240','270','300','330'];
var labelEls = [];
var deg30 = Math.PI * 30 / 180;
for (let i = 0; i < 12; i++) {
    labelEls.push(
        board.create('text', [
            () => circ.center.X() + (circ.Radius() - 0.5) * Math.cos(deg30 * i),
            () => circ.center.Y() + (circ.Radius() - 0.5) * Math.sin(deg30 * i),
            labels[i]
        ], {anchorX: 'middle', anchorY: 'middle'})
    );
}

See it live at https://jsfiddle.net/os4hgub5/.

Upvotes: 1

Related Questions