上篇文章，我們介紹了利用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 庫：



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

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

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



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

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

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

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

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

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

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



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

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

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

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

為了訪問這個節(jié)點，我們在代碼開頭使用通過導(dǎo)入 JSON 文件創(chuàng)建的“city”對象。



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

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

對于這個示例，我決定使用“深綠色”主題，但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”對象指的是我們的 JSON 文件，因此我們將 members 數(shù)組分配給 data 變量。這樣，我們將能夠訪問位于成員內(nèi)部的所有節(jié)點。

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

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

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

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

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

將看到我們的項目是如何編譯的：

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

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

可以點擊下載項目程序，使用 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圖表庫，專注于實時數(shù)據(jù)可視化。

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