APP下载

除了ECharts和AntV的视觉化方案 你还可以选择它——Apexcharts

消息来源:baojiabao.com 作者: 发布时间:2024-05-18

报价宝综合消息除了ECharts和AntV的视觉化方案 你还可以选择它——Apexcharts

介绍

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通过颜色和阴影表示资料。经常与更大的资料集合一起使用,它们对于识别模式和焦点区域很有价值。

仪表图

迷你图利用迷你图来指示资料趋势,例如,偶尔的增量或下降,货币周期,或以最极端和最小值为特征

图表面板现代化风格:

实时面板:

更多示例和用法可以参照官网文件,都会有详细的介绍和程式码演示

本土化

apexcharts提供了自定义的本土化功能,用于一些标题、格式的显示,只需要更改相关配置档案即可,详情参考官方文件

主题更换

apexcharts提供了非常人性化的主题功能,如果不想自定义,只需要设定相关属性即可,官方提供10中可选颜色主题

总结

总体来说ApexCharts是一个相对简单,但是功能不简单的图表库,而且文件也非常的详细,当你不需要ECharts或者AntV那样强大的功能的话,倒是可以选择ApexCharts,希望对你有所帮助!
2020-01-23 08:58:00

相关文章