异常教程

在 Ionic Framework 移动应用程序中使用图表

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2800+ 小伙伴加入学习 ，欢迎点击围观

我一直在努力为我开发的移动应用程序添加更多的天赋，无论是通过漂亮的用户界面还是图形。一段时间以来，我一直想在我的移动应用程序中处理图表，但它一直被推到我的开发后台。

我决定强迫自己试一试。使用 Ionic Framework 构建移动 Android 和 iOS 应用程序，您可以添加图表，因为存在如此多的 JavaScript 库。特别是，我们将看看 Chart.js 和 AngularJS 包装器 Angular Chart 。我们将研究这个库，因为它不仅看起来很棒，而且与构建 Ionic Framework 的 AngularJS 配合得很好。

与我的其他一些教程不同，本教程可以在 Web 浏览器和设备或模拟器中进行测试。这是因为我们不会使用任何本机插件或库。它将全部是 JavaScript 和 CSS。

让我们首先使用命令提示符或终端在我们的桌面上创建一个新的 Ionic Framework 项目： 


 ionic start IonicProject blank
cd IonicProject
ionic platform add android
ionic platform add ios

创建新的 Ionic Android 和 iOS 项目 Shell 1 2 3 4 ionic start IonicProject blank cd IonicProject ionic platform add android ionic platform add ios

请务必注意，如果您使用的不是 Mac，则无法为 iOS 平台添加和构建。

接下来要做的是下载 Chart.js 和 Angular Charts 的 JavaScript 库。首先下载最新的 Chart.js 库并将 Chart.min.js 添加到项目的 www/js 目录中。接下来，下载最新的 Angular Charts 库并将 angular-charts.min.js 添加到项目的 www/js 目录，将 angular-charts.css 添加到项目的 www/css 目录。

物理库文件包含在您的项目中，但需要将它们添加到您的源代码中。

打开项目的 www/index.html 文件并使其如下所示： 


 ionic start IonicProject blank
cd IonicProject
ionic platform add android
ionic platform add ios

注意上面突出显示的行及其位置。由于 css/styles.css 是您的自定义样式和覆盖，因此 Angular Charts CSS 文件应包含在其上方。 js/Chart.min.js 文件是原始 JavaScript 文件，因此在您尝试包含 js/angular-chart.min.js 包装器之前应该包含它。

接下来的很多内容将取自 Angular Charts 和 Chart.js 官方文档。

在项目的 www/js/app.js 文件中更改 angular.module 以包含 Angular Charts 包装器，如下所示： 


 ionic start IonicProject blank
cd IonicProject
ionic platform add android
ionic platform add ios

接下来，下拉到文件中并使用以下代码创建一个名为 ExampleController 的新控制器： 


 ionic start IonicProject blank
cd IonicProject
ionic platform add android
ionic platform add ios

我们将为多种图表类型使用相同的数据。它有七个标签和七个数据点。有多个系列，这就是为什么我们有两个数据数组，一个用于 A 系列 ，一个用于 B 系列 。

回到 www/index.html 文件，找到 <ion-content> 标签并将它们替换为以下内容： 


 ionic start IonicProject blank
cd IonicProject
ionic platform add android
ionic platform add ios

这里发生了什么？我们有两张 Ionic 卡。第一张卡片有折线图，第二张卡片有条形图，两者都带有一些自定义选项，如 Chart.js 文档中所述。特别是我们选择删除工具提示，因为它们可能会在旧版本的 Android 和 iOS 上导致奇怪的结果。

这些图表具有响应性，这在处理各种设备屏幕分辨率时非常有用。

结论

市面上有各种各样的图表库，但在这里我们看到了流行的带有 Angular 图表扩展的 Chart.js 库。它响应迅速，文档齐全，并且与 Ionic Framework 配合得很好。

可以在下面看到本文的视频版本。