Sertifikat olingYANGIW3Schools ilovasiiOS va AndroidSarguzashtni boshlang

Plotly.js grafikasi

Plotly.js - bu 40 dan ortiq diagramma turlariga ega diagramma kutubxonasi:

  • Gorizontal va vertikal ustunli diagrammalar
  • Pie va Donut diagrammalar
  • Line Charts
  • Nuqtali (Scatter) va pufakchali (Bubble) diagrammalar
  • Equation Plots
  • 3D Charts
  • Statistical Graphs
  • SVG Maps
  • ...

Plotly.js MIT litsenziyasi ostida bepul va ochiq manba hisoblanadi. Set va ishlatish uchun hech qanday xarajat yo‘q. Github yordamida manbani ko‘rishingiz, muammolar haqida xabar berishingiz va o‘z hissangizni qo‘shishingiz mumkin.

ULASHISH

Ustunli diagrammalar

Manba kodi

const xArray = ["Italy","France","Spain","USA","Argentina"];
const yArray = [55, 49, 44, 24, 15];

const data = [{
  x: xArray,
  y: yArray,
  type: "bar",
  orientation:"v",
  marker: {color:"rgba(0,0,255)"}
}];

const layout = {title:"World Wide Wine Production"};

Plotly.newPlot("myPlot", data, layout);

O‘zingiz sinab ko‘ring »

Gorizontal ustunli diagrammalar

Manba kodi

const xArray = [55, 49, 44, 24, 15];
const yArray = ["Italy","France","Spain","USA","Argentina"];

const data = [{
  x: xArray,
  y: yArray,
  type: "bar",
  orientation: "h",
  marker: {color:"rgba(255,0,0,0.6)"}
}];

const layout = {title:"World Wide Wine Production"};

Plotly.newPlot("myPlot", data, layout);

O‘zingiz sinab ko‘ring »

Doiraviy diagrammalar

Chiziqlar o‘rniga pirogni ko‘rsatish uchun x va y ni teglar va qiymatlarga o‘zgartiring va turini “pirog” ga o‘zgartiring:

const data = [{
  labels: xArray,
  values: yArray,
  type: "pie"
}];

O‘zingiz sinab ko‘ring »

Halqasimon diagrammalar

Pie o‘rniga donut ko‘rsatish uchun hole (teshik) qo‘shing:

const data = [{
  labels: xArray,
  values: yArray,
  hole: .4,
  type: "pie"
}];

O‘zingiz sinab ko‘ring »

Tenglamalar grafigini chizish

Manba kodi

let exp = "Math.sin(x)";

// Generate values
const xValues = [];
const yValues = [];
for (let x = 0; x <= 10; x += 0.1) {
  xValues.push(x);
  yValues.push(eval(exp));
}

// Display using Plotly
const data = [{x:xValues, y:yValues, mode:"lines"}];
const layout = {title: "y = " + exp};
Plotly.newPlot("myPlot", data, layout);
O‘zingiz sinab ko‘ring »

O‘rniga nuqtalarni (scatter) ko‘rsatish uchun mode’ni markers ga o‘zgartiring:

// Display using Plotly
const data = [{x:xValues, y:yValues, mode:"markers"}];
const layout = {title: "y = " + exp};
Plotly.newPlot("myPlot", data, layout);
O‘zingiz sinab ko‘ring »

Nuqtali diagrammalar

Manba kodi

const xArray = [50,60,70,80,90,100,110,120,130,140,150];
const yArray = [7,8,8,9,9,9,10,11,14,14,15];

// Define Data
const data = [{
  x: xArray,
  y: yArray,
  mode:"markers",
  type:"scatter"
}];

// Define Layout
const layout = {
  xaxis: {range: [40, 160], title: "Square Meters"},
  yaxis: {range: [5, 16], title: "Price in Millions"},
  title: "House Prices vs. Size"
};

Plotly.newPlot("myPlot", data, layout);

O‘zingiz sinab ko‘ring »

Chiziqli grafiklar

Manba kodi

const xArray = [50,60,70,80,90,100,110,120,130,140,150];
const yArray = [7,8,8,9,9,9,10,11,14,14,15];

// Define Data
const data = [{
  x: xArray,
  y: yArray,
  mode: "lines",
  type: "scatter"
}];

// Define Layout
const layout = {
  xaxis: {range: [40, 160], title: "Square Meters"},
  yaxis: {range: [5, 16], title: "Price in Millions"},
  title: "House Prices vs Size"
};

// Display using Plotly
Plotly.newPlot("myPlot", data, layout);

O‘zingiz sinab ko‘ring »

Pufakchali diagrammalar

Qabariqli chizmalar - markerlari o‘zgaruvchan rang, o‘lcham va belgilarga ega bo‘lgan tarqoq chizmalar.

Bu faqat ikkita o‘qqa (x va y) ega bo‘lgan 3 o‘lchamli diagramma turi bo‘lib, unda pufakcha o‘lchami uchinchi o‘lchamni ifodalaydi.

Manba kodi

const xArray = [1,2,3,4];
const yArray = [10,20,30,40];

const trace1 = {
  x: xArray,
  y: yArray,
  mode: 'markers',
  marker: {
    color: ['red', 'green', 'blue', 'orange'],
    size: [20, 30, 40, 50]
  }
};

const data = [trace1];

const layout = {
  title: "Plotting Bubbles"
};

Plotly.newPlot('myPlot', data, layout);

O‘zingiz sinab ko‘ring »

Chiziqli grafiklar

Manba kodi

let exp = "x + 17";

// Generate values
const xValues = [];
const yValues = [];
for (let x = 0; x <= 10; x += 1) {
  yValues.push(eval(exp));
  xValues.push(x);
}

// Define Data
const data = [{
  x: xValues,
  y: yValues,
  mode: "lines"
}];

// Define Layout
const layout = {title: "y = " + exp};

// Display using Plotly
Plotly.newPlot("myPlot", data, layout);

O‘zingiz sinab ko‘ring »

Bir nechta chiziq

Manba kodi

let exp1 = "x";
let exp2 = "1.5*x";
let exp3 = "1.5*x + 7";

// Generate values
const x1Values = [];
const x2Values = [];
const x3Values = [];
const y1Values = [];
const y2Values = [];
const y3Values = [];

for (let x = 0; x <= 10; x += 1) {
  x1Values.push(x);
  x2Values.push(x);
  x3Values.push(x);
  y1Values.push(eval(exp1));
  y2Values.push(eval(exp2));
  y3Values.push(eval(exp3));
}

// Define Data
const data = [
  {x: x1Values, y: y1Values, mode:"lines"},
  {x: x2Values, y: y2Values, mode:"lines"},
  {x: x3Values, y: y3Values, mode:"lines"}
];

// Define Layout
const layout = {title: "[y=" + exp1 + "] [y=" + exp2 + "] [y=" + exp3 + "]"};

// Display using Plotly
Plotly.newPlot("myPlot", data, layout);

O‘zingiz sinab ko‘ring »


‹ OrqagaKeyingisi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tishKirish