Современная библиотека для построения диаграмм на JavaScript, которая позволяет создавать интерактивные визуализации данных с помощью простого API и более 100 готовых образцов.

ApexCharts включает в себя функции, которые вы ожидаете увидеть. В библиотеке представлено более десятка типов диаграмм, которые обеспечивают красивые и адаптивные визуализации в ваших приложениях и информационных панелях. ApexCharts — это проект с открытым исходным кодом, лицензированный по MIT, который можно использовать в коммерческих и некоммерческих проектах.

Поддержка браузеров

Примечание: в ответе переведён только основной текст без учёта изображений. Загрузка и установка

Установка через npm

npm install apexcharts --save

Прямое включение <script>

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

Оболочки для Vue/React/Angular/Stencil

Простая интеграция с фреймворками сторонних разработчиков.

• vue-apexcharts (https://github.com/apexcharts/vue-apexcharts).
• react-apexcharts (https://github.com/apexcharts/react-apexcharts).
• ng-apexcharts — плагин от Morris Janatzek (https://morrisj.net/) (https://github.com/apexcharts/ng-apexcharts).
• stencil-apexcharts (https://github.com/apexcharts/stencil-apexcharts).

Неофициальные оболочки

Полезные ссылки на оболочки, помимо популярных фреймворков, упомянутых выше:

• apexcharter (https://github.com/dreamRs/apexcharter) — Htmlwidget для ApexCharts.
• apexcharts.rb (https://github.com/styd/apexcharts.rb) — Ruby-оболочка для ApexCharts.
• larapex-charts (https://github.com/ArielMejiaDev/larapex-charts) — Laravel-оболочка для ApexCharts.
• blazor-apexcharts (https://github.com/apexcharts/Blazor-ApexCharts) — Blazor-оболочка для ApexCharts демо.
• svelte-apexcharts (https://github.com/galkatz373/svelte-apexcharts) — Svelte-оболочка для ApexCharts.

Использование

import ApexCharts from 'apexcharts'

Чтобы создать базовую гистограмму с минимальной конфигурацией, напишите следующее:

var options = {
  chart: {
    type: 'bar'
  },
  series: [
    {
      name: 'sales',
      data: [30, 40, 35, 50, 49, 60, 70, 91, 125]
    }
  ],
  xaxis: {
    categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999]
  }
}

var chart = new ApexCharts(document.querySelector('#chart'), options)
chart.render()

Это создаст следующую диаграмму:

Больше, чем просто базовая конфигурация

Вы можете создавать комбинации различных диаграмм, синхронизировать их и придавать желаемый вид с неограниченными возможностями. Ниже приведён пример синхронизированных диаграмм в стиле GitHub.

Интерактивность

Масштабирование, панорамирование и прокрутка данных. Делайте выборки и загружайте другие диаграммы с использованием этих выборок. Пример, показывающий некоторую интерактивность:

Динамическое обновление серии

Ещё...