MohirDox

Ko'rinishi

Plotly.js ​

Plotly.js — 40 dan ortiq diagramma turlariga ega bo'lgan kuchli grafik kutubxonasi bo'lib, u quyidagilarni o'z ichiga oladi:

  • Gorizontal va vertikal ustunli diagrammalar
  • Doiraviy va halqasimon diagrammalar
  • Chiziqli grafiklar
  • Sochma va pufakchali grafiklar
  • Matematik tenglamalar grafiklari
  • 3D diagrammalar
  • Statistik grafiklar
  • SVG xaritalar
  • ...

Plotly.js MIT litsenziyasi ostida bepul va ochiq manbalidir. Uni o'rnatish va foydalanish mutlaqo bepul. Siz uning manba kodini ko'rishingiz, xatolar haqida xabar berishingiz va Github orqali rivojlanishiga hissa qo'shishingiz mumkin.

Ustunli diagrammalar (Bar Charts) ​

Manba kodi ​

js
const xArray = ['Italiya', 'Fransiya', 'Ispaniya', 'AQSH', '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: 'Dunyo sharob ishlab chiqarishi' }

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

Gorizontal ustunli diagrammalar ​

Manba kodi ​

js
const xArray = [55, 49, 44, 24, 15]
const yArray = ['Italiya', 'Fransiya', 'Ispaniya', 'AQSH', 'Argentina']

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

const layout = { title: 'Dunyo sharob ishlab chiqarishi' }

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

Doiraviy diagrammalar (Pie Charts) ​

Ustunlar o'rniga doirani ko'rsatish uchun x va y ni labels va values ga o'zgartiring, hamda turini (type) "pie" qiling:

js
const data = [
  {
    labels: xArray,
    values: yArray,
    type: 'pie'
  }
]

Halqasimon diagrammalar (Donut Charts) ​

Doira o'rniga halqani ko'rsatish uchun unga teshik (hole) qo'shing:

js
const data = [
  {
    labels: xArray,
    values: yArray,
    hole: 0.4,
    type: 'pie'
  }
]

Matematik tenglamalarni chizish ​

Manba kodi ​

js
let exp = 'Math.sin(x)'

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

// Plotly yordamida ko'rsatish
const data = [{ x: xValues, y: yValues, mode: 'lines' }]
const layout = { title: 'y = ' + exp }
Plotly.newPlot('myPlot', data, layout)

Sochma nuqtali grafiklar (Scatter Plots) ​

Manba kodi ​

js
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]

// Ma'lumotlarni aniqlash
const data = [
  {
    x: xArray,
    y: yArray,
    mode: 'markers',
    type: 'scatter'
  }
]

// Ko'rinishni (Layout) aniqlash
const layout = {
  xaxis: { range: [40, 160], title: 'Kvadrat metr' },
  yaxis: { range: [5, 16], title: 'Narx (millionlarda)' },
  title: 'Uy narxlari va ularning hajmi'
}

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

Chiziqli grafiklar (Line Graphs) ​

js
const data = [
  {
    x: xArray,
    y: yArray,
    mode: 'lines',
    type: 'scatter'
  }
]

Pufakchali grafiklar (Bubble Plots) ​

Pufakchali grafiklar — bu markerlarining rangi, hajmi va belgilari o'zgaruvchan bo'lgan sochma grafiklardir. Bu 3 o'lchamli diagramma turining bir shakli bo'lib, unda pufakning hajmi uchinchi o'lchamni anglatadi.

Manba kodi ​

js
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: 'Pufakchalarni chizish' }

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