介绍
ApexCharts.JS是一个开源的现代化JavaScript图表库,可以使用简单的API构建视觉化互动式图表,ApexCharts.JS比较好的地方在于它支援原生的js和当前主流的Web框架,如React、Vue以及Angular,虽然诸如阿里Antv以及百度ECharts都已经做的非常好了,但是毕竟你可以多一个选择,况且它足够简单!相关连结
官网:https://apexcharts.com/javascript-chart-demos/
Github:
https://github.com/apexcharts/apexcharts.js
Vue:
https://github.com/apexcharts/vue-apexcharts
React:
https://github.com/apexcharts/react-apexcharts
Angular:
https://github.com/apexcharts/ng-apexcharts
浏览器相容性
它的浏览器相容新还是不错的,特别是针对除IE以外的其它浏览器的低版本下载和安装
npm包管理npm install apexcharts --save浏览器直接引入
用法
建议使用模组化的方式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();
这样一个基础的图表就完成了
示例
下面介绍一下官方的一些示例和简介互动按照选择的方式进行图表的显示,如缩放,平移,滚动资料等
动态更新由其中一个图表来更新另一个数据,类似于联动的效果
混合图表可以组合多种图表型别来建立组合/混合图表。可能的组合可以是单个图表中的行/区域/列。每个图表型别都可以拥有自己的y轴。
烛台图表使用烛台图表(常见的金融图表)来描述证券,衍生品或货币的价格变化。下图显示了如何将另一个图表用作画笔/预览窗格,该窗格用作浏览主烛台图表的控制代码。
热图使用Heatmaps通过颜色和阴影表示资料。经常与更大的资料集合一起使用,它们对于识别模式和焦点区域很有价值。
仪表图
迷你图利用迷你图来指示资料趋势,例如,偶尔的增量或下降,货币周期,或以最极端和最小值为特征
图表面板现代化风格:
实时面板:
更多示例和用法可以参照官网文件,都会有详细的介绍和程式码演示