JS图表控件LightningCharts JS使用教程：创建 JavaScript 饼图

LightningChart是一个专注于数据表示的 API，使用各种图表（2D 和 3D），具有直观的实现和与各种开发平台的广泛兼容性。

TypeScript 是使用LightningChart JS开发的预期框架，因此建议在此编程语言下实现。

要执行本教程，建议至少有 Node JS 和 Visual Studio Code 的使用经验。

Node JS 和 TypeScript 等技术的使用在移动应用程序和 Web 开发中变得越来越普遍。 它们是高度通用的技术，可以轻松实现插件和 API。

对于此示例，我们将使用 Visual Studio Code。

有了简单的介绍，让我们开始吧：

最初模板

1. 下载将帮助我们开始使用此示例的初始模板。
2. 下载模板后，我们将在Visual Studio Code中打开整个文件夹：



注意：如果你还不熟悉 Node JS 之类的项目；在这些项目中，您会找到一个名为：package.json 的文件。

package.json 文件将包含运行项目所需的所有依赖项或库的列表。

这样做的目的是不必下载所有依赖项都存储在“node_modules”文件夹中的项目。

3. 打开一个新终端并运行 npm install 命令：

执行该命令后，我们将在终端中看到一系列下载。

如果我们检查文件资源管理器，我们将看到创建了一个名为“node_modules”的文件夹。

该文件夹将包含与我们的“package.json”文件中指定的每个依赖项对应的所有文件。

数据源

1. 完成项目的初始设置后，我们将开始创建数据。对于此示例，我们将创建一个“JSON”文件，其中包含将显示在 LightningChart 中的数据。


我们将右键单击“src”文件夹，然后选择“新建文件”选项。就我而言，我决定将我的文件命名为：



对于您的项目，您可以将其命名为您认为合适的任何名称。您只需将名称“城市”替换为文件名（在所有代码中），一切都应该正常工作。

在我们的新文件中，我们将编写以下 JSON 结构（您可以使用自己的值添加更多成员）：



{   "chartName": "Cities from Finland",   "members":[   {       "name":"Helsinki",       "population": 1305893,       "id":"FN101"   },   {       "name":"Tampere",       "population": 341696,       "id":"FN102"   }]}

2. 现在，打开“tsconfig.json”文件。我们必须添加以下行：


{   "compilerOptions": {                 "outDir": "./dist",      "module": "commonjs",                 "target": "es5",                 "esModuleInterop": true,                 "resolveJsonModule": true,      "lib": [          "es2015",                            "dom"                ]    }}

“ resolveJsonModule”选项允许我们将 JSON 模块导入 TypeScript 模块。

LightningChart JS | 下载试用

以上就是关于LightningChart JS使用教程中使用 NodeJS、TypeScript 和 LightningChart 创建 JavaScript 饼图序第一部分的内容，下篇将介绍饼形图的相关内容。

欢迎LightningChart技术交流群，获取最新产品咨询：

LightningChart JS是性能最高的JavaScript图表库，专注于实时数据可视化。

想要了解或购买LightningChart JS正版授权的朋友，欢迎咨询官方客服

标签：