manual de mi pagina

17. intervalos ejemplos

Ejemplos de uso del motor de recta numérica e intervalos v1

Esta página muestra ejemplos directos y automáticos con intervalos, uniones, intersecciones y distintos formatos de etiquetado.

recta intervalos unión intersección fracciones π

Ir a la documentación

1. Uso directo: un intervalo simple

RectaIntervalos.crearRectaIntervalos("recta-simple", {
  range: ["-5","5"],
  majorStep: "1",
  intervals: [
    { id:"A", from:"-2", to:"3", leftClosed:true, rightClosed:false }
  ]
});

2. Uso directo: unión e intersección

RectaIntervalos.crearRectaIntervalos("recta-soluciones", {
  range: ["-6","6"],
  majorStep: "1",
  intervals: [
    { id:"A", from:"-4", to:"1", leftClosed:true, rightClosed:false },
    { id:"B", from:"-1", to:"4", leftClosed:false, rightClosed:true }
  ],
  solutions: [
    { id:"U", type:"union", of:["A","B"] },
    { id:"I", type:"intersection", of:["A","B"] }
  ]
});

3. Automático: clase directa

<div class="recta-intervalos-auto"
     data-config='{
       "range":["-5","5"],
       "majorStep":"1",
       "intervals":[
         {"id":"A","from":"-3","to":"2","leftClosed":true,"rightClosed":false},
         {"id":"B","from":"0","to":"4","leftClosed":true,"rightClosed":true}
       ],
       "solutions":[
         {"id":"U","type":"union","of":["A","B"]},
         {"id":"I","type":"intersection","of":["A","B"]}
       ]
     }'></div>

4. Automático: clase genérica + data-tipo

<div class="recta-auto"
     data-tipo="recta"
     data-width="760"
     data-height="260"
     data-config='{
       "range":["-4","8"],
       "majorStep":"2",
       "minorDivisions":2,
       "intervals":[
         {"id":"C","from":"1","to":"6","leftClosed":false,"rightClosed":true}
       ]
     }'></div>

5. Fracciones en las etiquetas

RectaIntervalos.crearRectaIntervalos("recta-fracciones", {
  range: ["-2","2"],
  majorStep: "1/2",
  labelMode: "fraction",
  intervals: [
    { id:"F", from:"-3/2", to:"1/2", leftClosed:true, rightClosed:false }
  ]
});

6. Múltiplos de π

RectaIntervalos.crearRectaIntervalos("recta-pi", {
  range: ["-pi","2*pi"],
  majorStep: "pi/2",
  intervals: [
    { id:"P", from:"0", to:"pi", leftClosed:true, rightClosed:true }
  ]
});

7. Solo algunas etiquetas

RectaIntervalos.crearRectaIntervalos("recta-labelvalues", {
  range: ["-5","5"],
  majorStep: "1",
  labelValues: ["-4","-2","0","2","4"],
  intervals: [
    { id:"L", from:"-4","to":"4","leftClosed":true,"rightClosed":true }
  ]
});

8. Recta infinita

RectaIntervalos.crearRectaIntervalos("recta-infinita", {
  range: ["-5","5"],
  lineMode: "infinite",
  majorStep: "1",
  intervals: [
    { id:"R", from:"-1","to":"3","leftClosed":false,"rightClosed":true }
  ]
});

9. Redibujar un contenedor automático

const contenedor = document.getElementById("recta-auto-1");

contenedor.setAttribute("data-config", JSON.stringify({
  range: ["-6","6"],
  majorStep: "1",
  intervals: [
    { id:"A", from:"-5", to:"-1", leftClosed:true, rightClosed:false },
    { id:"B", from:"-2", to:"3", leftClosed:true, rightClosed:true }
  ],
  solutions: [
    { id:"I", type:"intersection", of:["A","B"] }
  ]
}));

RectaIntervalosAuto.redibujar(contenedor);

10. Scripts necesarios

<script src="rectaeintervalos_renderv1.js"></script>
<script src="rectaeintervalos_autov1.js"></script>