#libarary #apexcharts

● معرفی لایبرری ApexCharts.js ●

لایبرری ApexCharts.js یک کتابخانه‌ی جاوااسکریپتی است که برای ایجاد نمودارهای تعاملی و ریسپانسیو استفاده میشه و بهتون اجازه میده تا به راحتی انواع مختلفی از نمودارها رو مانند نمودارهای خطی، میله‌ای، دایره‌ای، و‌... رو ایجاد کنید.

ویژگی های کلیدی ✅

１سفارشی‌سازی بالا : امکان تغییر رنگ‌ها، استایل‌ها، و انیمیشن‌ها و....

２ ریسپانسیو بودن : نمودارهای ایجاد شده با ApexCharts به طور خودکار با اندازه‌ی صفحه نمایش تطبیق پیدا می‌کنند.

３ پشتیبانی از داده‌های داینامیک : می‌توانید داده‌های خود را از API‌ها دریافت کنید و در لحظه تو نمودارها نمایش دهید.

４ پشتیبانی از فریم ورک ها : برای react, vue و angular پکیج داره ولی برای استفاده تو فریم ورک های دیگه جاوااسکریپتی میتونید خیلی ساده از وانیلا جی ‌اس  استفاده کنید

مثال عملی 🚀

import React from 'react';
import Chart from 'react-apexcharts';

const SalesChart = () => {
  const options = {
    chart: {
      type: 'line',
      height: 350,
    },
    xaxis: {
      categories: ['ژانویه', 'فوریه', 'مارس', 'آوریل', 'مه', 'ژوئن', 'ژوئیه'],
    },
    title: {
      text: 'نمودار فروش ماهانه',
      align: 'center',
    },
  };

  const series = [
    {
      name: 'فروش',
      data: [10, 20, 15, 30, 40, 35, 50],
    },
  ];

  return <Chart options={options} series={series} type="line" height={350} />;
};

export default SalesChart;

وبسایت رسمی apexcharts.js 🔗

Channel | Group | YouTube