| |
| Rad 6: |
Rad 6: |
| | | | |
| | <jsxgpre id="graph123"> | | <jsxgpre id="graph123"> |
| − | var b=mlg.board([-3.75,3.75,5.75,-3.75],{desktopSize:'medium'}); | + | var b=mlg.board([-3.75,3.75,5.75,-6.25],{desktopSize:'medium'}); |
| | b.xaxis(1,1,'x',{ticks:{label:{display:'html'}}}); | | b.xaxis(1,1,'x',{ticks:{label:{display:'html'}}}); |
| − | b.yaxis(1,1,'y',{ticks:{label:{display:'html'}}}); | + | var yax = b.yaxis(1,1,'y',{ticks:{label:{display:'html'}}}); |
| | + | console.log(yax) |
| | + | b.remove(yax.yaxis.ticks[0].labels[7]); |
| | + | b.remove(yax.yaxis.ticks[0].labels[8]); |
| | | | |
| | var padding = 0.25; | | var padding = 0.25; |
| Rad 19: |
Rad 22: |
| | var t = b.txt(3,-2.5,'<!--T:8--> Funktionsvärde: '+p1.Y().toFixed(1),{flag:true, mathMode:false, fontSize:1.1}); | | var t = b.txt(3,-2.5,'<!--T:8--> Funktionsvärde: '+p1.Y().toFixed(1),{flag:true, mathMode:false, fontSize:1.1}); |
| | $(b.getId(t)).css({ | | $(b.getId(t)).css({ |
| − | "width":"43%",
| + | "width":"43%", |
| − | "text-align":"center"
| + | "text-align":"center" |
| | }); | | }); |
| | b.changeText(t,'<!--T:10--> Funktionsvärde: 2.0'); | | b.changeText(t,'<!--T:10--> Funktionsvärde: 2.0'); |
| | setTimeout(function(){b.board.update();},0); | | setTimeout(function(){b.board.update();},0); |
| | | | |
| − | mlg.af("graph123.movePoint", function(val){
| + | var movePoint = function(val){ |
| | p1.moveTo([val, f.Y(val)]); | | p1.moveTo([val, f.Y(val)]); |
| | b.changeText(t,'<!--T:9--> Funktionsvärde: '+ p1.Y().toFixed(1)); | | b.changeText(t,'<!--T:9--> Funktionsvärde: '+ p1.Y().toFixed(1)); |
| Rad 34: |
Rad 37: |
| | yArrow.setAttribute({lastArrow:true}); | | yArrow.setAttribute({lastArrow:true}); |
| | } | | } |
| | + | }; |
| | + | |
| | + | var bb = b.board.getBoundingBox(); |
| | + | b.polygon([ |
| | + | [bb[0],-4.25], |
| | + | [bb[2],-4.25], |
| | + | [bb[2],bb[3]], |
| | + | [bb[0],bb[3]] |
| | + | ],{borders:{strokeColor:'white'}, fillColor:'white'}); |
| | + | |
| | + | |
| | + | var sliderSegment = b.segment([-2,-5.5],[4,-5.5]); |
| | + | var sliderText = b.txt(5, -5.5, '4'); |
| | + | b.txt(1, -5, 'Välj x-värde', {mathMode:false}); |
| | + | var sp = b.sliderPoint(sliderSegment, -3, 5, 4,{valueAsName:false}); |
| | + | sp.on('drag', function(){ |
| | + | movePoint(sp.value); |
| | + | b.changeText(sliderText, String(sp.value)); |
| | + | });var b=mlg.board([-3.75,3.75,5.75,-5.75],{desktopSize:'medium'}); |
| | + | b.xaxis(1,1,'x',{ticks:{label:{display:'html'}}}); |
| | + | var yax = b.yaxis(1,1,'y',{ticks:{label:{display:'html'}}}); |
| | + | console.log(yax) |
| | + | b.remove(yax.yaxis.ticks[0].labels[7]); |
| | + | |
| | + | var padding = 0.25; |
| | + | |
| | + | var f = b.func('0.75*x-1','blue'); |
| | + | var n1 = b.node(2.5,4.4); |
| | + | var p1 = b.point(4,f.Y(4)); |
| | + | b.segment([function(){return p1.X();},0],p1,{withLabel:false}); |
| | + | var yArrow = b.segment(p1,[0,function(){return p1.Y();}],{withLabel:false, lastArrow:true, touchLastPoint:false}); |
| | + | var t = b.txt(3,-2.5,'<!--T:8--> Funktionsvärde: '+p1.Y().toFixed(1),{flag:true, mathMode:false, fontSize:1.1}); |
| | + | $(b.getId(t)).css({ |
| | + | "width":"43%", |
| | + | "text-align":"center" |
| | }); | | }); |
| | + | b.changeText(t,'<!--T:10--> Funktionsvärde: 2.0'); |
| | + | setTimeout(function(){b.board.update();},0); |
| | + | |
| | + | var movePoint = function(val){ |
| | + | p1.moveTo([val, f.Y(val)]); |
| | + | b.changeText(t,'<!--T:9--> Funktionsvärde: '+ p1.Y().toFixed(1)); |
| | + | if (Math.abs(p1.X()) < padding) { |
| | + | yArrow.setAttribute({lastArrow:false}); |
| | + | } |
| | + | else { |
| | + | yArrow.setAttribute({lastArrow:true}); |
| | + | } |
| | + | }; |
| | | | |
| − | </jsxgpre>
| + | var bb = b.board.getBoundingBox(); |
| − | <jsxgpre id="graph123-slider">
| + | b.polygon([ |
| − | JXG.Options.point.fixed=false;
| + | [bb[0],-4.25], |
| − | var b = mlg.board(mlg.bb.slider(-3,5),{keepaspectratio:false, renderer:'canvas'});
| + | [bb[2],-4.25], |
| − | var s = b.slider(4,0,null,{snapWidth:-1,precision:1,title:{label:'<translate><!--T:6--> | + | [bb[2],bb[3]], |
| − | Välj</translate> ' + 'x'.italics() + '<translate><!--T:7-->
| + | [bb[0],bb[3]] |
| − | -värde</translate>'}});
| + | ],{borders:{strokeColor:'white'}, fillColor:'white'}); |
| − | b.sliderCall(s, "graph123.movePoint"); | + | |
| | + | |
| | + | var sliderSegment = b.segment([-2,-5],[4,-5]); |
| | + | var sliderText = b.txt(5, -5, '4'); |
| | + | var sp = b.sliderPoint(sliderSegment, -3, 5, 4,{valueAsName:false}); |
| | + | sp.on('drag', function(){ |
| | + | movePoint(sp.value); |
| | + | b.changeText(sliderText, String(sp.value)); |
| | + | }); |
| | </jsxgpre> | | </jsxgpre> |
| | | | |
