半岛权威十大直营(官方)网站

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

目前有两种使用 LightingCharts 进行开发的解决方案。

• LightningChart .NET 用于桌面应用程序（支持 WPF、UWP 和 WinForms）
• LightningChart JS 用于 Web、移动和桌面应用程序。

今天，我们将做一个简短的教程，介绍如何使用 Node JS、TypeScript 和 LigningCharts JS 生成饼图。

首先需要获取LigningCharts JS：

LightningCharts JS官方正版下载

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

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

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

在开始之前，需要有一个允许编辑 javascript 和 typescript 文件的开发平台。

对于此示例，我们将使用 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技术交流群，获取最新产品咨询：740060302

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

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