Passing Apex Data into ChartJS using Promises

DEX602 - Unit 5 Building Advanced Components

📄 第 360 页 🎬 视频课程

课程章节介绍

同学们,今天我们要学习一个非常实用的技能——如何将Salesforce中的Apex数据传递到ChartJS中,用来展示一个最受欢迎认证的图表。听起来是不是很酷?让我们一步步来。 首先,我们需要从Apex中获取数据。这里我们会使用一个我们自己定义的Apex方法,叫做`getCertPopularity`。这个方法会返回一些数据,比如不同认证的受欢迎程度。 接下来,我们需要在页面上使用ChartJS来展示这些数据。ChartJS是一个很棒的JavaScript库,专门用来制作各种图表。为了使用它,我们需要先把它导入到我们的Salesforce环境中。这里我们可以使用Salesforce提供的`loadScript`方法,这个方法可以帮助我们加载外部的JavaScript库,比如ChartJS。 当我们调用`loadScript`来加载ChartJS时,这个方法会返回一个Promise。Promise是JavaScript中的一个概念,简单来说,它代表了一个将来会完成的操作。当这个操作完成时,我们可以继续执行后续的代码。 同样地,当我们调用`getCertPopularity`这个Apex方法时,它也会返回一个Promise。这意味着我们可以等待这个方法完成,获取到我们需要的认证数据。 一旦我们获取到了数据,我们就需要对这些数据进行一些处理。因为ChartJS需要的数据格式是两个数组:一个数组用来存放认证的名称,另一个数组用来存放每个认证的受欢迎程度。所以,我们需要循环遍历我们获取到的数据,然后重新格式化,生成这两个数组。 最后,当我们有了这两个数组,我们就可以使用ChartJS来创建一个图表,展示最受欢迎的认证了。 总结一下,我们首先加载ChartJS,然后获取Apex数据,处理数据,最后用ChartJS展示数据。这个过程涉及到Promise的使用,确保我们在数据准备好之后再继续操作。希望这个过程对你们来说既简单又有趣!