一个现代的JavaScript图表库,它允许您用简单的API和100+即用样本构建交互式数据可视化. Apex Charts 包含了十几种图表类型,在你的应用软件和仪表板中提供优美的,响应性的可视化功能. ApexCharts是一个MIT许可的开源项目,可用于商业和非商业项目.
浏览器支持
 火花 |  颜色 |  萨法里 |  边缘 |  IE11 数据 |
|---|---|---|---|---|
| 31+ | 35+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ | 6+ | 边缘 | (环境倡议11) ✔ |
下载和安装
通过 npm 安装
npm install apexcharts --save
直接的 < script> 包括
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
Vue/反应/Angular/Stencil包装器
与第三方框架容易结合
非正式包装
除上述通俗框架之外,其他包装的有用链接
使用量
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风格的同步图表的例子.
互动
缩放、潘和通过数据滚动。 使用这些选择进行选择并加载其他图表. 显示一些交互作用的例子
动态序列更新
另一种方法是下潜图表,其中一种选择更新了其他图表的数据. 将动态序列加载到图表的示例如下:
说明
说明允许您就特定值或轴值编写自定义文本。 珍贵地拓展了您图表的视觉吸引力并让其更加翔实.
混合图
可以结合多个图表类型来创建组合/混合图表. 可能的组合可以是一行/一行/一列并用一行图. 每个图表类型都可以有自己的y轴.
烛台
使用烛台图(通用财务图)来描述一种证券,衍生物,或货币的价格变化. 下面的图像显示您如何使用另一个图表作为刷子/预览面板, 它充当浏览主烛台图表的手柄 .
热图
使用热图通过颜色和阴影来表示数据. 它们经常用于收集更大的数据,对识别模式和重点领域很有价值.
高地语
微量测量仪是仪表板的重要组成部分,对显示单系列数据有用. 这些测量仪的演示:
闪光线
利用闪光线来显示数据的趋势,例如偶尔的增减、货币周期,或显示最极端和最低值:
您的下一个项目需要高级数据网格吗 ?
我们和野蛮人合作 创造了地球上最快的数据网 Ignite UI Grids可以处理无限行和列的数据,同时提供自定义模板和实时数据更新的访问.
设计出一种直观的API来方便地进行主题和品牌制作,可以快速地用最小的手接编码来绑定数据. 网格可以在你最喜欢的框架中找到:
角数据网格 | 反应数据网格 | 布拉佐尔数据网格 | Web 组件数据Grid | j 查询数据网格
包括什么
下载捆绑包括以下文件和目录,在 Dist 文件夹中提供一个已修改的单文件. 每个资产,包括图标/cs,都被捆绑在js本身,以避免加载多文件.
apexcharts/
├── dist/
│ └── apexcharts.min.js
├── src/
│ ├── assets/
│ ├── charts/
│ ├── modules/
│ ├── utils/
│ └── apexcharts.js
└── samples/
与 IE11 一起使用
如果您需要与 IE11 工作, 在包含 Apex 图之前, 您需要包含这些多填充
- 承诺填充
- 类列表.js
- 调整观察员多填充的大小
- 查找Index 数据 - 只有当您需要时间/距离图时,您才会需要这个
- 缩写 - 只有需要PNG下载图表,你才会需要这个
发展
安装依赖关系并运行工程
npm install
npm run dev
这将启动 Webpack 手表和任何更改 src 文件夹将自动编译,输出将在 dist 文件夹.
缩小斜弧
npm run build
我接下来要去哪儿?
去那边 文档 一节将更多阅读如何使用不同种类的图表,并探索所有选项.
联系人
电子邮件 : 信息库@apexcharts.com
脸书: fb.com/图表
依赖性
顶图使用 SVG.js (西班牙语) 用于绘制外形,动画,应用svg滤波器,并多出在罩下. 库被捆绑在最终的构建文件中,所以不需要包含它.
许可证
Apex Charts根据麻省理工学院的许可发布. 只要版权标题完好无损, 您可以自由使用、 修改和分发此软件 .