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正版授權的朋友，歡迎咨詢