MohirDox

Ko'rinishi

JavaScript Grafikasi ​

Grafika Kutubxonalari ​

Turli xil grafikalar (grafiklar, diagrammalar) yaratish uchun quyidagi JavaScript kutubxonalaridan foydalanish mumkin:

  • Plotly.js
  • Chart.js
  • Google Chart

Plotly.js ​

Plotly.js — 40 dan ortiq diagramma turlariga ega bo'lgan kutubxona bo'lib, u 3D diagrammalar, statistik grafikalar va SVG xaritalarni o'z ichiga oladi.

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

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

const layout = { title: 'Butunjahon sharob ishlab chiqarish' }

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

Batafsil ma'lumot ...

Chart.js ​

Chart.js kutubxonasi ko'plab tayyor diagramma turlari bilan birga keladi:

  • Sochma (Scatter)
  • Chiziqli (Line)
  • Ustunli (Bar)
  • Radar
  • Doiraviy (Pie va Doughnut)
  • Qutbli soha (Polar Area)
  • Pufakchali (Bubble)
js
new Chart('myPlot13', {
  type: 'bar',
  data: {
    labels: ['Italiya', 'Fransiya', 'Ispaniya', 'AQSH', 'Argentina'],
    datasets: [
      {
        backgroundColor: ['red', 'green', 'blue', 'orange', 'brown'],
        data: [55, 49, 44, 24, 15]
      }
    ]
  },
  options: {
    legend: { display: false },
    title: {
      display: true,
      text: 'Butunjahon sharob ishlab chiqarish 2018'
    }
  }
})

Batafsil ma'lumot ...

Google Chart ​

Oddiy chiziqli grafiklardan tortib murakkab ierarxik daraxt xaritalarigacha (tree maps), Google Chart ko'plab tayyor turlarni taklif etadi:

  • Sochma grafik (Scatter Chart)
  • Chiziqli grafik (Line Chart)
  • Ustunli grafik (Bar / Column Chart)
  • Maydonli grafik (Area Chart)
  • Doiraviy diagramma (Pie Chart)
  • Halqasimon diagramma (Donut Chart)
  • Tashkiliy diagramma (Org Chart)
  • Xarita / Geografik diagramma (Map / Geo Chart)

Batafsil ma'lumot ...