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

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

• 用于桌面应用程序的 LightningChart .NET（支持 WPF、UWP 和 WinForms）

• 用于 Web、移动和桌面应用程序的 LightningChart JS。

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

要查看如何免费获得 LightningChart JS，请联系我们。

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

要学习本教程，建议您至少具备 Node JS 和 Visual Studio Code 的使用经验。

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

在开始之前，需要有一个可以让我们编辑javascript和typescript文件的开发平台。

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

在没有安装 Node JS 的情况下。需要安装（强烈建议安装最新版本的 Node JS）：

https://nodejs.org/en/

鉴于简要介绍，让我们开始吧：

最初设定

1. 下载将帮助我们开始使用此示例的初始模板。

2、下载好模板后，我们在Visual Studio Code中打开整个文件夹：

=>

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

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

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

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

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

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

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

数据源

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

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

对于您的项目，您可以随意称呼它。您只需将名称“cities”替换为您的文件名（在所有代码中），一切都应该正常工作。 

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

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

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

饼形图

1. 我们现在开始编写我们的 LightningChart 图表。打开文件“PieChart.ts”并导入我们的 JSON 文件：

2.导入LightningChart JS库：

注意：  @  arction/lcjs 库是在我们项目的初始设置期间下载的。这将位于 [node_modules/@arction] 文件夹内。

我们将导入 LightningChart 集合，以便在我们的饼图中使用它们：

PieChartTypes= PieChart 实现的集合 。每个选项都可以有自己的视觉设计和 API 来定制它。  

LegendBoxBuilders=可用的集合 LegendBoxBuilders。要构建 LegendBoxes ，您必须将其中之一传递给方法：  . addLegendBox() 

SliceLabelFormatters= 它允许我们为图表中的标签提供自定义格式。 

Themes= 预先设计的主题集合。这些主题有自己的调色板和其他图形界面属性。  

有关 更多 信息，请联系我们。

3. 现在我们将添加一个简短的条件：

“如果窗口分辨率足够宽，将选择带有外部标签的饼图，否则，它们将显示在每个切片内。”

4.是时候创建我们的饼图实例了。

在我们的对象中，我们将分配图表类型（在本例中为“ PieType”）和图表的主题。在 Title 值中，我们可以直接写入图表的标题。

对于此示例，我将使用ChartName位于 JSON 文件中的“”节点。 

为了访问这个节点，我们在代码的开头使用了通过导入 JSON 文件创建的“city”对象。

对于这个例子，我决定使用“深绿色”主题，但是LightningChart 为我们提供了种类繁多的主题，而且只需要键入主题名称即可。

最后，我们将值“true”分配给图表的动画。

5. 最后，我们将值分配给图表的标签：

如果你还记得，“ city”对象指的是我们的 JSON 文件，所以我们将成员数组分配给数据变量。这样，我们将能够访问位于成员内部的所有节点。

在切片常量中，我们将为成员中添加的每个部分创建一张幻灯片。

该函数将为每个成员.map 执行该函数。addSlice

在 内部addSlice，必须分配两个值：标记值和用于计算每张幻灯片大小的数值。

最后，对标签进行格式化，并添加图例框。

此框被分配了宽度，并指定了它对应的图形。

6. 最后，我们将执行 npm_start 命令。 

我们将看到我们的项目是如何编译的：

如果我们按住control键，点击我们项目运行的路径，就会打开我们默认的浏览器，可以看到结果：

在图表中，我们可以与每个对象进行交互，生成动画以帮助我们更好地理解所显示的信息。

项目 (.ZIP)

这是一个 zip 项目的链接，您可以使用它来使用 LightningChart JS 生成您自己的饼图。

下载项目

用于桌面、Web 和移动应用程序开发的LightningChart ® 数据可视化库