<p align="center"><img src="https://apexcharts.com/media/apexcharts-logo.png"></p>
<p align="center">
<a href="https://github.com/apexcharts/apexcharts.js/blob/master/LICENSE"><img src="https://img.shields.io/badge/License-MIT-brightgreen.svg" alt="License"></a>
<a href="https://travis-ci.com/apexcharts/apexcharts.js"><img src="https://api.travis-ci.com/apexcharts/apexcharts.js.svg?branch=master" alt="build" /></a>
<img alt="downloads" src="https://img.shields.io/npm/dm/apexcharts.svg"/>
<a href="https://www.npmjs.com/package/apexcharts"><img src="https://img.shields.io/npm/v/apexcharts.svg" alt="ver"></a>
<img alt="size" src="https://badgen.net/bundlephobia/min/apexcharts?label=size">
<a href="https://cdn.jsdelivr.net/npm/[email protected]/types/apexcharts.d.ts"><img src="https://badgen.net/npm/types/apexcharts"/></a>
<a href="https://github.com/prettier/prettier"><img src="https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square" alt="prettier"></a>
<a href="https://www.jsdelivr.com/package/npm/apexcharts"><img src="https://data.jsdelivr.com/v1/package/npm/apexcharts/badge" alt="jsdelivr" /></a>
<a href="https://codeclimate.com/github/apexcharts/apexcharts.js"><img src="https://badgen.net/codeclimate/maintainability/apexcharts/apexcharts.js" /></a>
<img src="https://badgen.net/codeclimate/tech-debt/apexcharts/apexcharts.js"/>
</p>
<p align="center">
<a href="https://twitter.com/intent/tweet?text=Create%20visualizations%20with%20this%20free%20and%20open-source%20JavaScript%20Chart%20library&url=https://www.apexcharts.com&hashtags=javascript,charts,visualizations,developers,apexcharts"><img src="https://img.shields.io/twitter/url/http/shields.io.svg?style=social"> </a>
</p>
<p align="center">A modern JavaScript charting library that allows you to build interactive data visualizations with simple API and 100+ ready-to-use samples. Packed with the features that you expect, ApexCharts includes over a dozen chart types that deliver beautiful, responsive visualizations in your apps and dashboards. ApexCharts is an MIT licensed open-source project that can be used in commercial and non-commercial projects.</p>
<p align="center"><a href="https://apexcharts.com/javascript-chart-demos/"><img
src="https://apexcharts.com/media/apexcharts-banner.png"></a></p>
<br />
## Browsers support
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/> Edge | [<img src="https://user-images.githubusercontent.com/17712401/124668393-30772d00-de87-11eb-9360-3199c3b68b95.png" alt="IE" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/> IE11 |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| 31+ ✔ | 35+ ✔ | 6+ ✔ | Edge ✔ | [(IE11)](#using-it-with-ie11) ✔ |
## Download and Installation
##### Installing via npm
```bash
npm install apexcharts --save
```
##### Direct <script> include
```html
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
```
## Wrappers for Vue/React/Angular/Stencil
Integrate easily with 3rd party frameworks
- [vue-apexcharts](https://github.com/apexcharts/vue-apexcharts)
- [react-apexcharts](https://github.com/apexcharts/react-apexcharts)
- [ng-apexcharts](https://github.com/apexcharts/ng-apexcharts) - Plugin by [Morris Janatzek](https://morrisj.net/)
- [stencil-apexcharts](https://github.com/apexcharts/stencil-apexcharts)
### Unofficial Wrappers
Useful links to wrappers other than the popular frameworks mentioned above
- [apexcharter](https://github.com/dreamRs/apexcharter) - Htmlwidget for ApexCharts
- [apexcharts.rb](https://github.com/styd/apexcharts.rb) - Ruby wrapper for ApexCharts
- [larapex-charts](https://github.com/ArielMejiaDev/larapex-charts) - Laravel wrapper for ApexCharts
- [blazor-apexcharts](https://github.com/apexcharts/Blazor-ApexCharts) - Blazor wrapper for ApexCharts [demo](https://apexcharts.github.io/Blazor-ApexCharts/)
- [svelte-apexcharts](https://github.com/galkatz373/svelte-apexcharts) - Svelte wrapper for ApexCharts
## Usage
```js
import ApexCharts from 'apexcharts'
```
To create a basic bar chart with minimal configuration, write as follows:
```js
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()
```
This will render the following chart
<p align="center"><a href="https://apexcharts.com/javascript-chart-demos/column-charts/"><img src="https://apexcharts.com/media/first-bar-chart.svg"></a></p>
### A little more than the basic
You can create a combination of different charts, sync them and give your desired look with unlimited possibilities.
Below is an example of synchronized charts with github style.
<p align="center"><a href="https://apexcharts.com/javascript-chart-demos/area-charts/github-style/"><img src="https://apexcharts.com/media/github-charts.gif"></a></p>
## Interactivity
Zoom, Pan, Scroll through data. Make selections and load other charts using those selections.
An example showing some interactivity
<p align="center"><a href="https://codepen.io/apexcharts/pen/QrbE
没有合适的资源?快使用搜索试试~ 我知道了~
前端素材推荐优质后台管理系统Modernize平台模板(附源码)
共651个文件
js:303个
scss:101个
json:86个
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
0 下载量 120 浏览量
2024-02-21
11:38:01
上传
评论 3
收藏 9.04MB ZIP 举报
温馨提示
博文连接:https://blog.csdn.net/m0_46013789/article/details/136207693 后台管理系统是一个用于管理和控制网站、应用程序或系统的管理界面。它通常由开发人员或管理员使用,用于管理用户、内容、数据和系统设置。下面是关于后台管理系统的多层次详细分析和功能:用户管理、内容管理、数据管理、系统设置、统计和报告、通知和消息、插件和扩展、性能优化、安全防护、用户反馈和支持、多语言支持 。 后台管理系统是一个用于管理和控制网站、应用程序或系统的管理界面,具有多种功能包括用户管理、内容管理、数据管理、系统设置、统计和报告、通知和消息、插件和扩展、性能优化、安全防护、用户反馈和支持、多语言支持等。这些功能帮助管理员有效地管理和维护系统,确保系统安全、稳定和高效运行。
资源推荐
资源详情
资源评论
收起资源包目录
前端素材推荐优质后台管理系统Modernize平台模板(附源码) (651个子文件)
prepros.config 23KB
styles.css 332KB
styles.min.css 328KB
bootstrap.css 261KB
bootstrap.rtl.css 261KB
bootstrap.css 260KB
bootstrap.css 260KB
bootstrap.rtl.min.css 216KB
bootstrap.min.css 216KB
tabler-icons.css 143KB
bootstrap-utilities.css 94KB
bootstrap-utilities.css 94KB
bootstrap-utilities.rtl.css 94KB
bootstrap-utilities.css 94KB
bootstrap-grid.rtl.css 74KB
bootstrap-grid.css 74KB
bootstrap-grid.css 74KB
bootstrap-grid.css 74KB
bootstrap-utilities.min.css 73KB
bootstrap-utilities.rtl.min.css 73KB
bootstrap-grid.rtl.min.css 55KB
bootstrap-grid.min.css 55KB
apexcharts.css 13KB
apexcharts.css 12KB
bootstrap-reboot.css 11KB
bootstrap-reboot.rtl.css 11KB
bootstrap-reboot.css 11KB
bootstrap-reboot.css 11KB
bootstrap-reboot.rtl.min.css 10KB
bootstrap-reboot.min.css 10KB
simplebar.css 4KB
simplebar.css 4KB
simplebar.min.css 3KB
tabler-icons.eot 1.45MB
tab.html 31KB
index.html 29KB
scrollspy.html 18KB
modal.html 15KB
ui-forms.html 11KB
ui-card.html 11KB
ui-buttons.html 11KB
ui-typography.html 10KB
ui-alerts.html 10KB
dropdown.html 10KB
icon-tabler.html 9KB
sample-page.html 9KB
tooltip.html 6KB
collapse.html 5KB
index.html 4KB
authentication-login.html 3KB
button.html 3KB
carousel.html 3KB
authentication-register.html 3KB
toast.html 3KB
alert.html 2KB
popover.html 2KB
s11.jpg 226KB
s5.jpg 121KB
s1.jpg 115KB
s4.jpg 82KB
s7.jpg 76KB
user-1.jpg 30KB
apexcharts.js 1.09MB
apexcharts.amd.js 536KB
apexcharts.min.js 491KB
apexcharts.common.js 491KB
apexcharts.esm.js 491KB
jquery.js 273KB
jquery.slim.js 221KB
bootstrap.bundle.js 203KB
simplebar.js 168KB
bootstrap.js 142KB
bootstrap.esm.js 133KB
svg.js 102KB
jquery.min.js 86KB
dropdown.spec.js 84KB
bootstrap.bundle.min.js 79KB
bootstrap.esm.min.js 72KB
jquery.slim.min.js 69KB
sizzle.js 64KB
bootstrap.min.js 59KB
simplebar.min.js 58KB
carousel.spec.js 51KB
tooltip.spec.js 48KB
tab.spec.js 42KB
modal.spec.js 39KB
collapse.spec.js 37KB
simplebar.esm.js 36KB
scrollspy.spec.js 32KB
simplebar-core.esm.js 32KB
simplebar.js 29KB
offcanvas.spec.js 29KB
Pie.js 28KB
Options.js 27KB
index.spec.js 25KB
Tooltip.js 25KB
event.js 24KB
TimeScale.js 24KB
apexcharts.js 22KB
ajax.js 22KB
共 651 条
- 1
- 2
- 3
- 4
- 5
- 6
- 7
资源评论
枫蜜柚子茶
- 粉丝: 6345
- 资源: 4732
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功