LightningChart JS是性能最高的JavaScript圖表庫(kù)，專注于實(shí)時(shí)數(shù)據(jù)可視化。是Web上性能最高的圖表庫(kù)具有出色的執(zhí)行性能 - 使用高數(shù)據(jù)速率同時(shí)監(jiān)控?cái)?shù)十個(gè)數(shù)據(jù)源。 GPU加速和WebGL渲染確保您的設(shè)備的圖形處理器得到有效利用，從而實(shí)現(xiàn)高刷新率和流暢的動(dòng)畫。用于貿(mào)易，工程，航空航天，醫(yī)藥和其他領(lǐng)域的應(yīng)用。

LightningChart JS | 下載試用

歡迎加入LightningChart技術(shù)交流群： 740060302  

數(shù)據(jù)分析已成為各個(gè)行業(yè)決策過程中不可或缺的一部分，從金融到醫(yī)療保健再到營(yíng)銷。收集的數(shù)據(jù)量正在增加。這導(dǎo)致對(duì)能夠有效分析和交流復(fù)雜數(shù)據(jù)集的工具的更大需求。這就是數(shù)據(jù)可視化的用武之地。

LightningChart JS 是一個(gè)強(qiáng)大的圖表工具，用于在 JavaScript 中創(chuàng)建高級(jí)數(shù)據(jù)可視化。本文將介紹蜘蛛圖的基礎(chǔ)知識(shí)以及如何使用它們有效地顯示多變量數(shù)據(jù)，并提供有關(guān)如何使用 LightningChart 創(chuàng)建蜘蛛圖的分步說明，以及探討如何使用 LightningChart JS 庫(kù)創(chuàng)建蜘蛛圖。

JavaScript 蜘蛛圖

一種流行的數(shù)據(jù)可視化類型是蜘蛛圖，也稱為雷達(dá)圖、極坐標(biāo)圖或星圖。蜘蛛圖是一種以二維圖表形式顯示數(shù)據(jù)的圖表。所有軸都起源于同一點(diǎn)。它們對(duì)于顯示多變量數(shù)據(jù)以及識(shí)別模式和趨勢(shì)特別有用。

蜘蛛圖是一種流行的圖表類型，用于比較不同維度的多個(gè)產(chǎn)品或變量。食品和體育等行業(yè)經(jīng)常使用蜘蛛圖來評(píng)估產(chǎn)品或運(yùn)動(dòng)員的表現(xiàn)。這非常重要，因?yàn)樾枰獜亩鄠€(gè)角度評(píng)估性能。例如，蜘蛛圖是顯示特定食品營(yíng)養(yǎng)價(jià)值的絕佳方式。

蜘蛛圖類似于其他類型的圖表。他們?cè)趦蓚€(gè)軸上繪制數(shù)據(jù)，通常從零到最高值。然而，蜘蛛圖與眾不同的是它們獨(dú)特的繪圖和協(xié)調(diào)系統(tǒng)。

傳統(tǒng)圖表依賴于具有 X 軸和 Y 軸的笛卡爾坐標(biāo)系，而蜘蛛圖使用極坐標(biāo)系。在極坐標(biāo)系中，從中心到最大值的長(zhǎng)度表示正在繪制的數(shù)據(jù)。這種獨(dú)特的制圖方法使蜘蛛圖成為分析和呈現(xiàn)多元數(shù)據(jù)的寶貴工具。

接下來便是如何使用 LightningChart 庫(kù)創(chuàng)建蜘蛛圖的可行技巧。

創(chuàng)建 JavaScript 蜘蛛圖

如果您希望在 JavaScript 中創(chuàng)建蜘蛛圖，LightningChart 庫(kù)是一個(gè)很好的選擇。憑借其先進(jìn)的數(shù)據(jù)可視化功能，LightningChart 可以輕松創(chuàng)建和自定義蜘蛛圖以滿足您的特定需求。

使用 LightningChart 創(chuàng)建蜘蛛圖有兩種方法。第一種是使用 LightningChart 界面。該界面提供了一系列用于自定義圖表外觀和功能的選項(xiàng)。

其次，LightningChart 提供了一種創(chuàng)建蜘蛛圖的方法。這是通過使用儀表板完成的。儀表板提供易于使用的界面，可讓您快速輕松地創(chuàng)建復(fù)雜的可視化效果。

這兩個(gè)選項(xiàng)都提供了一種強(qiáng)大而靈活的方式來使用 LightningChart 創(chuàng)建蜘蛛圖。LightningChart 使創(chuàng)建蜘蛛圖變得容易。該界面提供了詳細(xì)的控制，而儀表板則簡(jiǎn)化了流程。這些圖表以有吸引力且有意義的方式突出顯示您的數(shù)據(jù)。

蜘蛛圖的制作方式非常簡(jiǎn)單：

// Create a spider chart and Three series.
const chart = lightningChart().Spider({
theme: Themes.lightNew,
})

蜘蛛圖可以使用SpiderChart.addSeries添加許多SpiderSeries。以下是將新的 SpiderSeries 添加到 SpiderChart 的示例。還提供了為標(biāo)記和線單獨(dú)指定樣式的能力。

const spiderSeries = chart.addSeries(PointShape.Circle)
.setName('Positive feedback distribution')
.setFillStyle(fillStyle)
.setPointFillStyle(pointFillStyle)
// etc ...

向圖表中添加數(shù)據(jù)

可以使用 API addPoints方法推送數(shù)據(jù)。實(shí)際數(shù)據(jù)以以下格式添加：{ axis: string, value: number }，其中“axis”是指類別的名稱。

 添加具有唯一標(biāo)簽的點(diǎn)將自動(dòng)為蜘蛛圖創(chuàng)建新的分類軸。按照添加的順序（第一個(gè)軸永遠(yuǎn)指向正上方，后面的軸順時(shí)針方向移動(dòng)）。在一個(gè)系列中向同一類別標(biāo)簽添加更多點(diǎn)將覆蓋任何先前的值。

spiderSeries.addPoints(
// Any number of { axis, value } pairs can be passed.
{ axis: 'Pre-planning', value: 6 },
{ axis: 'Customer contacts', value: 22 },
{ axis: 'Meetings', value: 61 },
{ axis: 'Development tIme', value: 76 },
{ axis: 'Releases', value: 100 }
)

因此，正如您所看到的，我們可以在 LightingChart 的幫助下輕松創(chuàng)建蜘蛛圖。JavaScript 雷達(dá)圖的創(chuàng)建與蜘蛛圖的創(chuàng)建非常相似。

設(shè)置樣式

在類型參數(shù)的幫助下，使用 LCJS 創(chuàng)建地圖非常容易。

const MapChart= lightningChart().Map({
type: MapTypes.World, // <-- Select MapType here
});

1.蜘蛛網(wǎng)模式

通過使用SpiderWebModes——更具體地說，SpiderWebMode.Circle ，可以將 SpiderCharts 的樣式設(shè)置為看起來像傳統(tǒng)的 JavaScript 雷達(dá)圖。它可用于選擇SpiderChart 網(wǎng)絡(luò)的形狀，如圓形或正常。

// Set the web mode of SpiderChart, affecting the shape of its background, webs, and nibs.
spiderChart.setWebMode(SpiderWebMode.Circle)

2. 設(shè)置WebStyle

可以使用LineStyle來設(shè)置 JavaScript 雷達(dá)圖網(wǎng)頁(yè)的樣式。為此，我們可以使用setWebStyle API，其用法如下：

spiderChart.setWebStyle(new SolidLine({
thickness: 1,
fillStyle: new SolidFill({ color: ColorRGBA( 255, 0, 0 ) })
}))

3 . 設(shè)置網(wǎng)絡(luò)計(jì)數(shù)

通過使用setWebCount API，我們可以設(shè)置 JavaScript 雷達(dá)圖上顯示的“網(wǎng)絡(luò)”數(shù)量：

spiderChart.setWebCount(10)

4. 設(shè)置筆尖長(zhǎng)度

通過使用setNibLength API，我們可以為 JavaScript 雷達(dá)圖設(shè)置軸尖的長(zhǎng)度（以像素為單位）。

spiderChart.setNibLength(50)spiderChart.setNibLength(50)

5.設(shè)置NibStyle

通過使用 setNibStyle API，我們可以將軸尖的樣式設(shè)置為 JavaScript 蜘蛛雷達(dá)圖的 SolidLine。

SpiderChart.setNibStyle(new SolidLine({
thickness: 5,
fillStyle: new SolidFill({ color: ColorRGBA( 255, 0, 0 ) })
}))

6. 設(shè)置系列背景填充樣式

通過使用 setSeriesBackgroundFillStyle API，我們可以將FillStyle設(shè)置 為系列背景（系列后面的區(qū)域）。

總之，LightningChart 庫(kù)提供了一種創(chuàng)建 JavaScript 雷達(dá)圖或蜘蛛圖變體的簡(jiǎn)單方法，這能夠使您以多個(gè)維度顯示多元數(shù)據(jù)。本次關(guān)于如何使用 LightningChart JS 創(chuàng)建 JavaScript 雷達(dá)圖和蜘蛛圖的介紹到這里了，點(diǎn)擊此處查看LightningChart系列教程。

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