نمای کلی وبسایت رسمی
ApexCharts دارای ویژگیهای قدرتمندی است که نیازهای شما در زمینه تجسم دادهها را برآورده میکند.
استفاده
فایل JS مربوط به نمودار زیر را در پیدا کنید: resources/js/components/apexchart-area.js
نمودار مسیحی پایه#
<div dir="ltr" class="mb-3">
<div id="basic-area" class="apex-charts"></div>
</div>
نمودار مسطح - محور زمان#
<div class="mb-3">
<div class="toolbar apex-toolbar">
<button id="one_month" class="btn btn-sm btn-light">۱ ماه</button>
<button id="six_months" class="btn btn-sm btn-light">۶ ماه</button>
<button id="one_year" class="btn btn-sm btn-light active">۱ سال</button>
<button id="ytd" class="btn btn-sm btn-light">سال جاری</button>
<button id="all" class="btn btn-sm btn-light">همه</button>
</div>
<div dir="ltr">
<div id="area-chart-datetime" class="apex-charts"></div>
</div>
</div>
نمودار با مقادیر منفی#
<div dir="ltr" class="mb-3">
<div id="area-chart-negative" class="apex-charts"></div>
</div>
انتخاب - سبک گیتهاب#
<div class="mb-3">
<div id="area-chart-github" class="apex-charts"></div>
<div class="pt-2 pb-2">
<div class="row align-items-center">
<div class="col-auto">
<img src="/images/users/avatar-2.jpg" class="avatar-xs rounded" alt="file-image">
</div>
<div class="col ps-0">
<a href="javascript:void(0);" class="text-muted fw-bold">Techzaa</a>
</div>
</div>
</div>
<div id="area-chart-github2" class="apex-charts"></div>
</div>
نمودار مسطح با مقادیر خالی#
<div dir="ltr">
<div id="area-chart-nullvalues" class="apex-charts"></div>
</div>