Kalkulator wykresów 2D

Kalkulator graficzny online oparty o skrypty Desmos. Pozwala na rysowanie wykresów funkcji, dodawanie suwaków, tworzenie animacji i wiele więcej.

Przykładowy wykres

Wykresy matematyczne 2D to graficzne reprezentacje funkcji matematycznych w dwóch wymiarach. Kilka podstawowych rodzajów wykresów:

Wykres liniowy (grafik):

- - Jest to najpopularniejszy rodzaj wykresu. Oś pozioma reprezentuje zmienną niezależną (np. czas), a oś pionowa reprezentuje zmienną zależną (np. wartość funkcji).
  - Przykład: Wykres funkcji liniowej $f (x) = 2 x + 3$
    .

Wykres funkcji kwadratowej:
- Funkcje kwadratowe mają postać $f (x) = a x^{2} + b x + c$
  gdzie: $a$ , $b,$ $c$ to stałe.
- Wykres funkcji kwadratowej jest parabolą.
- Przykład: $f (x) = x^{2} - 4 x + 5$
Wykres funkcji trygonometrycznych:
- Obejmuje funkcje sinus, cosinus, tangens itp.
- Przykład: Wykres funkcji sinusoidalnej $f (x) = sin (x)$
Wykres funkcji wykładniczej:
- Funkcje wykładnicze mają postać $f (x) = a \cdot b^{x}$
  gdzie: $a, b$ to stałe.
- Wykres funkcji wykładniczej jest krzywą rosnącą lub malejącą.
- Przykład: $f (x) = 2^{x}$
  .
Wykres funkcji logarytmicznej:
- Funkcje logarytmiczne mają postać $f (x) = log_{b} (x)$
  gdzie: $b$ to podstawa logarytmu.
- Wykres funkcji logarytmicznej jest krzywą rosnącą lub malejącą.
- Przykład: $f (x) = log (x)$
  .
Wykresy punktowe:
- Wykorzystywane do pokazania pojedynczych punktów danych.
- Przykład: Wykres punktowy przedstawiający wyniki egzaminów uczniów.

Pliki na stronę

Jak wstawić gadżet na własną stronę?

Można to zrobić ręcznie lub pobrać gotowca i go edytować jak dusza zapragnie.

Strona pomocy DESMOS.

Tworzymy odpowiednie pliki:

index.html
style.css
main.js

index.html

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">


  <link rel="stylesheet" href="style.css">
  <title>Kalkulator wykresów 2D</title>
  <link href='https://fonts.googleapis.com/css?family=Satisfy' rel='stylesheet' type='text/css'>
  <script src="https://www.desmos.com/api/v0.6/calculator.js?apiKey=dcb31709b452b1cf9dc26972add0fda6"></script>
</head>

<body>
<h2>Kalkulator wykresów 2D</h2>

 <div id="bell" class="graph"></div>



<br>








  <script src="main.js"></script>

</body>

</html>

style.css


body{
  background-color: #fff;
  margin: 0;
}
h2{
  text-align: center;
  color: #000;
  text-transform: uppercase;
  font-size: 28px;
  border-bottom: 2px solid #000;
}

.graph {
  width: 100%;
  height: 600px;
  
}

img.desmosicon {
  width: 40px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

main.js

    
// JavaScript Document
// www.skrip.pl
//for help: https://www.desmos.com/api/v0.6/docs/index.html#document-expressions
//change below ID to match the div in the html file Id, change latex, change math bounds, change axis info
var elt = document.getElementById('u1s2p3a');

var calculator = Desmos.Calculator(elt, {
  zoomButtons: false,
  expressions: true,
  settingsMenu: false,
  expressionsCollapsed: true
});
calculator.setExpressions([
  //don't change the id, but change the latex formula
  {
    id: 'graph',
    latex: 'y=x^2'
  }, {
    id: 'graph2',
    latex: 'y=2x'
  }, {
    type: 'table',
    columns: [{
      latex: 'x',
      values: ['2', '1']
    }, {
      latex: 'y',
      values: ['4', '5'],
      dragMode: Desmos.DragModes.XY
    }]
  }
]);
calculator.setMathBounds({
  //change below to change graph bounds
  left: -1,
  right: 4,
  bottom: -1,
  top: 10
});
calculator.setGraphSettings({
  //change values below to set axis scale or labels - set to 0 for auto
  xAxisLabel: '', //set this to 2 single quotes for nothing ''
  yAxisLabel: '',
  xAxisStep: 1, // x axis count step
  yAxisStep: 1
}); //end the graph item























//begin a graph item
//change below ID to match the div in the html file Id, change latex, change math bounds, change axis info
var elt = document.getElementById('123');

var calculator = Desmos.Calculator(elt, {
  zoomButtons: true,
  expressions: true,
  settingsMenu: true
});
calculator.setExpressions([
  //don't change the id, but change the latex formula
  {
    id: 'graph',
    latex: ''
  }
]);
calculator.setMathBounds({
  //change below to change graph bounds
  left: -20,
  right: 20,
  bottom: -20,
  top: 20
});
calculator.setGraphSettings({
  //change values below to set axis scale or labels - set to 0 for auto
  xAxisLabel: '', //set this to 2 single quotes for nothing ''
  yAxisLabel: '',
  xAxisStep: 5, // x axis count step
  yAxisStep: 5
}); //end the graph item






//bell
var elt = document.getElementById('bell');

var calculator123 = Desmos.Calculator(elt, {
  zoomButtons: true,
  expressions: true,
  settingsMenu: true
});
calculator123.setExpressions([
  //don't change the id, but change the latex formula
  {
    id: 'graph1',
    latex: 'f(x)=e^{(-{(x-a)^2}/{b})}',
  },
   {
    id: 'slider1',
    latex: 'a=0',
    sliderBounds: {
      min: 0,
      max: 0,
      step: 1
    }
  }, {
       id: 'slider2',
    latex: 'b=1',
    sliderBounds: {
      min: .01,
      max: 10,
      step: .01
    }
  }, {
    id: 'graph4',
    latex: '0<y\\le f\\left(x\\right)\\left\\{x_1<x<x_2\\right\\}',
    color: '#8064A2'
  }, {
    id: 'slider3',
    latex: 'x_1=-1',
    sliderBounds: {
      min: -6.5,
      max: 6.5,
      step: .01
    }
  }, {
    id: 'slider4',
    latex: 'x_2=1',
    sliderBounds: {
      min: -6.5,
      max: 6.5,
      step: .01
    }
  }

]);
calculator123.setMathBounds({
  //change below to change graph bounds
  left: -3,
  right: 3,
  bottom: -.2,
  top: 1.2
});
calculator123.setGraphSettings({
  //change values below to set axis scale or labels - set to 0 for auto
  xAxisLabel: '', //set this to 2 single quotes for nothing ''
  yAxisLabel: '',
  xAxisStep: '', // x axis count step
  yAxisStep: ''
}); //end the graph itemsssdf

function getstate123() {
  var state123 = calculator123.getState();
  console.log(state123);
  //window.alert(state123);
}

Top Stories

Wangiri scam – jak nie zostać ofiarą

Statystyki wyszukiwarki PornHub za 2024 rok

Prosty sposób na zdobycie 1000 GB transferu danych na rok w Orange na kartę

Kalkulator wykresów funkcji 2-D

Kalkulator graficzny online oparty o skrypty Desmos.

Kalkulator wykresów 2D

Przykładowy wykres

Pliki na stronę

Jak wstawić gadżet na własną stronę?

index.html

style.css

main.js

WOŚP 2025

Chmurka tagów

Zaprzyjaźniona strona

Najczęściej oglądane wpisy