LightningChart是一個(gè)專注于數(shù)據(jù)表示的 API，使用各種圖表（2D 和 3D），具有直觀的實(shí)現(xiàn)和與各種開發(fā)平臺(tái)的廣泛兼容性。

目前有兩種使用 LightingCharts 進(jìn)行開發(fā)的解決方案。

• LightningChart .NET 用于桌面應(yīng)用程序（支持 WPF、UWP 和 WinForms）
• LightningChart JS 用于 Web、移動(dòng)和桌面應(yīng)用程序。

今天，我們將做一個(gè)簡短的教程，介紹如何使用 Node JS、TypeScript 和 LigningCharts JS 生成餅圖。

首先需要獲取LigningCharts JS：

LightningCharts JS官方正版下載

TypeScript 是使用LightningChart JS開發(fā)的預(yù)期框架，因此建議在此編程語言下實(shí)現(xiàn)。

要執(zhí)行本教程，建議至少有 Node JS 和 Visual Studio Code 的使用經(jīng)驗(yàn)。

Node JS 和 TypeScript 等技術(shù)的使用在移動(dòng)應(yīng)用程序和 Web 開發(fā)中變得越來越普遍。 它們是高度通用的技術(shù)，可以輕松實(shí)現(xiàn)插件和 API。

在開始之前，需要有一個(gè)允許編輯 javascript 和 typescript 文件的開發(fā)平臺(tái)。

對(duì)于此示例，我們將使用 Visual Studio Code。

有了簡單的介紹，讓我們開始吧：

最初模板

1. 下載將幫助我們開始使用此示例的初始模板。
2. 下載模板后，我們將在Visual Studio Code中打開整個(gè)文件夾：





注意：如果你還不熟悉 Node JS 之類的項(xiàng)目；在這些項(xiàng)目中，您會(huì)找到一個(gè)名為：package.json 的文件。

package.json 文件將包含運(yùn)行項(xiàng)目所需的所有依賴項(xiàng)或庫的列表。

這樣做的目的是不必下載所有依賴項(xiàng)都存儲(chǔ)在“node_modules”文件夾中的項(xiàng)目。

3. 打開一個(gè)新終端并運(yùn)行 npm install 命令：

執(zhí)行該命令后，我們將在終端中看到一系列下載。

如果我們檢查文件資源管理器，我們將看到創(chuàng)建了一個(gè)名為“node_modules”的文件夾。

該文件夾將包含與我們的“package.json”文件中指定的每個(gè)依賴項(xiàng)對(duì)應(yīng)的所有文件。

數(shù)據(jù)源

1. 完成項(xiàng)目的初始設(shè)置后，我們將開始創(chuàng)建數(shù)據(jù)。對(duì)于此示例，我們將創(chuàng)建一個(gè)“JSON”文件，其中包含將顯示在 LightningChart 中的數(shù)據(jù)。



我們將右鍵單擊“src”文件夾，然后選擇“新建文件”選項(xiàng)。就我而言，我決定將我的文件命名為：



對(duì)于您的項(xiàng)目，您可以將其命名為您認(rèn)為合適的任何名稱。您只需將名稱“城市”替換為文件名（在所有代碼中），一切都應(yīng)該正常工作。

在我們的新文件中，我們將編寫以下 JSON 結(jié)構(gòu)（您可以使用自己的值添加更多成員）：



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

2. 現(xiàn)在，打開“tsconfig.json”文件。我們必須添加以下行：



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

“ resolveJsonModule”選項(xiàng)允許我們將 JSON 模塊導(dǎo)入 TypeScript 模塊。

LightningChart JS | 下載試用

以上就是關(guān)于LightningChart JS使用教程中使用 NodeJS、TypeScript 和 LightningChart 創(chuàng)建 JavaScript 餅圖序第一部分的內(nèi)容，下篇將介紹餅形圖的相關(guān)內(nèi)容。

歡迎LightningChart技術(shù)交流群，獲取最新產(chǎn)品咨詢：740060302

LightningChart JS是性能最高的JavaScript圖表庫，專注于實(shí)時(shí)數(shù)據(jù)可視化。

想要了解或購買LightningChart JS正版授權(quán)的朋友，歡迎咨詢