上篇文章，我們介紹了利用LightningChart生成餅圖關(guān)于數(shù)據(jù)源的相關(guān)內(nèi)容，現(xiàn)在我們來介紹如何具體創(chuàng)建餅形圖。

LightningCharts JS官方正版下載

1. 我們現(xiàn)在開始編寫 LightningChart 圖表。打開文件“PieChart.ts”并導(dǎo)入我們的 JSON 文件：



//Import data json file
import city from './cities.json';

2. 導(dǎo)入 LightningChart JS 庫(kù)：



// Import LightningChartJS
Const lcjs = require('@arction/lcjs')

注意： @ arction/lcjs 庫(kù)是在我們項(xiàng)目的初始設(shè)置期間下載的。這將位于 [node_modules/@arction] 文件夾內(nèi)。

我們將導(dǎo)入 LightningChart 集合，以便在我們的餅圖中使用它們：



//Extract required properties from LightningChartJS
   const {
                 LightningChart,
      PieChartTypes,
                 LegendBoxBuilders,
                 SliceLabelFormatters,               
      Themes
   } = lcjs

PieChartTypes= PieChart 實(shí)現(xiàn)的集合 。每個(gè)選項(xiàng)都可以有自己的視覺設(shè)計(jì)和 自定義API 。

LegendBoxBuilders=可用的集合 LegendBoxBuilders。要構(gòu)建 LegendBoxes ，您必須將其中之一傳遞給方法： . addLegendBox()

SliceLabelFormatters= 它允許我們?yōu)閳D表中的標(biāo)簽提供自定義格式。

Themes= 預(yù)先設(shè)計(jì)的主題集合。這些主題有自己的調(diào)色板和其他圖形界面屬性。

3. 現(xiàn)在我們將添加一個(gè)短條件：

“如果窗口分辨率足夠?qū)?，將選擇帶有外部標(biāo)簽的餅圖，否則將顯示在每個(gè)切片內(nèi)?！?



const pieType = window.innerWidth > 599 ? PieChartTypes.LabelsOnSides : PieChartTypes.LabelsInsideSlices

4. 是時(shí)候創(chuàng)建我們的餅圖實(shí)例了。

在我們的對(duì)象中，我們將分配圖表的類型（在本例中為“ PieType”）和圖表的主題。在 Title 值中，我們可以直接寫出我們圖表的標(biāo)題。

對(duì)于此示例，我將采用ChartName位于 JSON 文件中的“”節(jié)點(diǎn)。

為了訪問這個(gè)節(jié)點(diǎn)，我們?cè)诖a開頭使用通過導(dǎo)入 JSON 文件創(chuàng)建的“city”對(duì)象。



const pie = lightningChart().Pie({
   theme: Themes.darkGreen ,
   type: pieType
})

   .setTitle(city.chartName)
   .setAnimationsEnabled(true)
   .setMultipleSliceExplosion(true)

對(duì)于這個(gè)示例，我決定使用“深綠色”主題，但LightningChart 為我們提供了多種主題，只需鍵入主題名稱即可。

5. 最后，我們將值分配給圖表的標(biāo)簽：

// Select json data
const data = city.members

// ----- Create Slices -----
const slices = data.map((item) => pie.addSlice(item.id+'-'+item.name, item.population))

// Specify function which generates text for Slice Labels(LabelFormatter).
pie.setLabelFormatter(SliceLabelFormatters.NamePlusRelativeValue)

 

// ----- Add LegendBox -----
pie.addLegendBox(LegendBoxBuilders.VerticalLegendBox)

// Dispose example UI elements automatically if they take too much space. This is to avoid bad UI on mobile / etc. devices.

.setAutoDispose({

type:  'max-width',
maxWidth: 0.30,

})
.add(pie)

如果您還記得，“ city”對(duì)象指的是我們的 JSON 文件，因此我們將 members 數(shù)組分配給 data 變量。這樣，我們將能夠訪問位于成員內(nèi)部的所有節(jié)點(diǎn)。

在 slices 常量中，我們將為在成員中添加的每個(gè)部分創(chuàng)建一個(gè)幻燈片。

該函數(shù)將為每個(gè)成員.map 執(zhí)行該函數(shù)。

在內(nèi)部addSlice，必須分配兩個(gè)值：標(biāo)記值和用于計(jì)算每張幻燈片大小的數(shù)值。

最后，對(duì)標(biāo)簽進(jìn)行格式化，并添加圖例框。

該框被分配了寬度，并指定了它對(duì)應(yīng)的圖形。

將看到我們的項(xiàng)目是如何編譯的：

如果我們按住control鍵點(diǎn)擊我們項(xiàng)目運(yùn)行的路徑，我們的默認(rèn)瀏覽器會(huì)打開，我們可以看到結(jié)果：

在圖表中，我們可以與每個(gè)對(duì)象進(jìn)行交互，生成有助于我們更好地理解所顯示信息的動(dòng)畫。

可以點(diǎn)擊下載項(xiàng)目程序，使用 LightningChart JS 生成自己的餅圖。

LightningChart JS | 下載試用

以上就是關(guān)于LightningChart JS使用教程中使用 NodeJS、TypeScript 和 LightningChart 創(chuàng)建 JavaScript 餅圖序創(chuàng)建餅形圖的相關(guān)內(nèi)容。

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

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

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