Plotly bilan grafik chizish
Plotly.js — ko‘plab turli diagramma turlarini taqdim etuvchi diagrammalar kutubxonasi:
- Gorizontal va vertikal ustunli diagrammalar
- Doiraviy va halqasimon diagrammalar
- Chiziqli diagrammalar
- Nuqtali va pufakchali diagrammalar
- Tenglama grafiklari
- 3D diagrammalar
- Statistik grafiklar
- SVG xaritalar
- va boshqalar ...
Plotly.js MIT litsenziyasi ostida tarqatiladigan bepul va ochiq kodli kutubxona. Uni o‘rnatish va ishlatish mutlaqo bepul. GitHub orqali manba kodini ko‘rishingiz, muammolar haqida xabar berishingiz va loyihaga hissa qo‘shishingiz mumkin.
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);
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);
Doiraviy diagrammalar
Ustunlar o‘rniga doiraviy diagramma ko‘rsatish uchun x va y ni labels va values ga, type ni esa "pie" ga o‘zgartiring:
const data = [{
labels: xArray,
values: yArray,
type: "pie"
}];
Halqasimon diagrammalar
Doiraviy diagramma o‘rniga halqasimon diagramma ko‘rsatish uchun hole (teshik) qo‘shing:
const data = [{
labels: xArray,
values: yArray,
hole: .4,
type: "pie"
}];
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 »
Buning o‘rniga nuqtalarni 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);
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);
Pufakchali diagrammalar
Pufakchali diagrammalar — markerlari turli rang, o‘lcham va belgilarga ega bo‘lgan nuqtali diagrammalar.
Bu faqat ikkita o‘qqa (x va y) ega bo‘lgan 3 o‘lchamli diagramma turi bo‘lib, unda pufakchaning 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);
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);
Bir nechta chiziqlar
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);
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!