譯者 | 李睿

審校 | 重樓

本文介紹用戶(hù)如何使用ReactJS和LightningChartJS（LCJS）庫(kù)創(chuàng)建JavaScript蜘蛛圖。

什么是ReactJS？

ReactJS是Facebook創(chuàng)建的一個(gè)框架，在開(kāi)發(fā)時(shí)非常注重實(shí)現(xiàn)用戶(hù)界面。

由于更多地關(guān)注用戶(hù)界面，建議使用ReactJS作為視圖層，使用模型-視圖-控制器模式。

因此在本文中，將對(duì)React項(xiàng)目進(jìn)行初步設(shè)置，并簡(jiǎn)要實(shí)現(xiàn)LightningChart，以展示庫(kù)在該項(xiàng)目中的使用。

1.安裝ReactJS

為了使用命令安裝ReactJS，需要安裝Node JS和NPM命令接口。此外，還可以訪(fǎng)問(wèn)NPM官方文檔頁(yè)面。

因此，在安裝了NPM之后，可以執(zhí)行ReactJS安裝命令。首先，用戶(hù)需要以管理員身份打開(kāi)命令提示符并運(yùn)行以下命令：

npm i -g create-react-app 

上述命令將下載完整的React庫(kù)。一旦React安裝完成，將看到一個(gè)React命令列表，作為安裝成功的確認(rèn)。

現(xiàn)在將創(chuàng)建一個(gè)React項(xiàng)目。將在命令提示符中執(zhí)行以下命令：

npx create-react-app lc-react-app

lc-react-app將設(shè)定項(xiàng)目的默認(rèn)名稱(chēng)，也可以更改名稱(chēng)。

在創(chuàng)建項(xiàng)目后，將顯示項(xiàng)目所存儲(chǔ)的路徑。建議將項(xiàng)目剪切粘貼到一個(gè)易于訪(fǎng)問(wèn)的路徑中。

2.配置項(xiàng)目

在開(kāi)始之前，需要安裝LightningChart JS (@arction/lcjs)庫(kù)。下載ReactJS蜘蛛圖項(xiàng)目模板，用Visual Studio Code打開(kāi)：

這個(gè)項(xiàng)目看起來(lái)應(yīng)該與上圖相同或相似?，F(xiàn)在打開(kāi)一個(gè)新終端，這樣就可以安裝LightningChart JS了。以下命令npm i@arction/lcjs將LightningChart JS庫(kù)安裝到項(xiàng)目中。

現(xiàn)在，如果執(zhí)行npm start命令，將能夠在本地服務(wù)器上編譯和查看頁(yè)面。

在本地服務(wù)器上編譯ReactJS項(xiàng)目

3.創(chuàng)建蜘蛛圖

在開(kāi)始編寫(xiě)圖表代碼之前，必須理解將要使用的文件。

與Angular不同的是，視圖和邏輯是按組件分組的，React從一個(gè)更簡(jiǎn)單的結(jié)構(gòu)開(kāi)始。首先，將看到兩個(gè)JS文件：index.JS和App.JS。

這些文件有一個(gè)默認(rèn)的命名，但可以根據(jù)需要重命名。索引文件將包含允許呈現(xiàn)App.js文件創(chuàng)建的視圖的代碼。

App.js包含了負(fù)責(zé)構(gòu)建將要呈現(xiàn)的對(duì)象的邏輯。CSS文件將修改在相應(yīng)的JS文件中生成的對(duì)象的樣式。

當(dāng)用戶(hù)創(chuàng)建一個(gè)React項(xiàng)目時(shí)，會(huì)生成一個(gè)App.test.js文件。這個(gè)文件對(duì)應(yīng)于App.js文件，可以使用npm test命令來(lái)測(cè)試代碼。

其基本思想是，每個(gè)生成的JS文件都有一個(gè).test文件。對(duì)于這個(gè)項(xiàng)目，將創(chuàng)建一個(gè)名為SpiderChart.js的新文件。

該文件將包含生成蜘蛛圖的代碼。將單獨(dú)進(jìn)行，以保持圖表代碼的有序性，而不是將所有內(nèi)容都嵌入到App.js文件中。

A)導(dǎo)入必要的類(lèi)

將從導(dǎo)入必要的LightningChart JS類(lèi)開(kāi)始。導(dǎo)入組件的方法與Angular中使用的方法相同。

JavaScript 
1 import { lightningChart,LegendBoxBuilders, Themes } from '@arction/lcjs'
2 import React, { useRef, useEffect } from 'react'

現(xiàn)在，必須創(chuàng)建一個(gè)對(duì)象，該對(duì)象包含圖表，并且可以反過(guò)來(lái)將其導(dǎo)出到其他實(shí)例。

JavaScript 
1 const Chart = (props) => {
2 const { data, id } = props
3 const chartRef = useRef(undefined)
4 
5 useEffect(() => {

使用Effect Hook可以運(yùn)行獲取、直接更新DOM和計(jì)時(shí)器等副作用。在useEffect函數(shù)中，將封裝所有的蜘蛛圖邏輯。

現(xiàn)在，將對(duì)象類(lèi)型“Spider”分配給常量“chart”。當(dāng)指定圖表類(lèi)型時(shí)，也可以分配屬性。例如，可以指定組件的外觀(guān)以及圖表將要顯示的容器。

JavaScript 
1 const chart = lightningChart().Spider({
2 theme: Themes.auroraBorealis, 
3 container: id
4 })
5 .setTitle('Company branch efficiency')
6 .setAxisInterval(100)
7 .setScaleLabelStrategy(undefined)
8 .setPadding({ top: 100 })
9
10 const series = [
11 chart.addSeries()
12 .setName('Sydney'),
13 chart.addSeries()
14 .setName('Kuopio'),
15 chart.addSeries()
16 .setName('New York')
17 ]

B) 查看屬性

• setTitle：圖表的標(biāo)題。默認(rèn)情況下，標(biāo)題將顯示在圖表的頂部。
• setAxisInterval：設(shè)置圖表軸的間隔。
• setScaleLabelStrategy：設(shè)置繪制比例標(biāo)簽的策略。它定義了繪制哪些位置標(biāo)簽以及是否翻轉(zhuǎn)這些標(biāo)簽。
• addSeries：addSeries函數(shù)將允許創(chuàng)建一個(gè)獨(dú)立的數(shù)據(jù)系列，以顯示在圖表上。這些系列可能具有獨(dú)立的視覺(jué)屬性和值。

JavaScript
1 series.forEach((value, i) => {
2 value
3 .setPointSize(10)
4 .setCursorResultTableFormatter((builder, series, value, axis) =>
5 builder.addRow(`${series.getName()} ${axis}`)
6 )
7 })

• setCursorResultTableFormatter：當(dāng)光標(biāo)位于序列上時(shí)，它允許顯示序列中的值。
• setPointSize：指定每個(gè)點(diǎn)的像素大小。

C)為每個(gè)點(diǎn)添加標(biāo)簽

JavaScript 
1 const categories = ['Pre-planning', 'Customer contacts', 'Meetings', 'Development time', 'Releases',]

D)為系列賦值

JavaScript 
1series[0].addPoints(
2 { axis: categories[0], value: 6 },
3 { axis: categories[1], value: 22 },
4 { axis: categories[2], value: 61 },
5 { axis: categories[3], value: 76 },
6 { axis: categories[4], value: 100 },
7 )

根據(jù)系列的不同，必須改變索引的數(shù)量。

E)創(chuàng)建LegendBox

創(chuàng)建LegendBox作為SpiderChart的一部分。

JavaScript 
1 const legend = chart.addLegendBox(LegendBoxBuilders.HorizontalLegendBox)
2 // Dispose example UI elements automatically if they take too much space. This is to avoid bad UI on mobile / etc. devices.
3 .setAutoDispose({
4 type: 'max-width',
5 maxWidth: 0.80,
6 })
7 // Add SpiderChart to LegendBox
8   legend.add(chart)

• setautodispose：如果示例用戶(hù)界面元素占用太多空間，則自動(dòng)丟棄它們。這是為了避免糟糕的手機(jī)用戶(hù)界面。
• legend.add：將圖例框添加到圖表中。

F)返回函數(shù)

返回函數(shù)將在組件卸載時(shí)破壞圖形。圖表將存儲(chǔ)在容器(id)中。類(lèi)名“chart”將用于應(yīng)用App.css文件中的CSS類(lèi)。

JavaScript 
1 return () => {
2 // Destroy chart.
3 console.log('destroy chart')
4 chartRef.current = undefined
5 }
6 }, [id])
7
8 return <div id={id} className='chart'></div>
9 }
10
11 export default Chart

G)效果圖

為了渲染圖表對(duì)象，需要將它導(dǎo)入到App.js文件中:

JavaScript 
1 import React, { useEffect, useState } from 'react';
2 import './App.css'
3 import Chart from './SpiderChart'
4
5 const App = (props) => {
6 return <div className='fill'>
7 <Chart id='chart'/>
8 </div>
9 }
10
11 export default App

App常量將返回Chart對(duì)象。同樣，可以為主體應(yīng)用CSS類(lèi)。CSS類(lèi)位于App.css文件中。App常量將被導(dǎo)出到index.js文件中。

JavaScript 
1 import React from 'react';
2 import ReactDOM from 'react-dom/client';
3 import './index.css';
4 import App from './App';
5 import reportWebVitals from './reportWebVitals';
6
7 const root = ReactDOM.createRoot(document.getElementById('root'));
8 root.render(
9  <React.StrictMode>
10  <App />
11  </React.StrictMode>
12 );

最后一步是將App.js導(dǎo)入到index.js中。在JS文件之間導(dǎo)入/導(dǎo)出對(duì)象的方法在幾乎所有情況下都是相似的。對(duì)于Index文件，需要應(yīng)用一些React屬性，因?yàn)檫@里是操作DOM的地方。

嚴(yán)格模式：嚴(yán)格模式檢查只在開(kāi)發(fā)模式下運(yùn)行。它們不會(huì)影響產(chǎn)品構(gòu)建。

4.最終的應(yīng)用程序

總之，ReactJS和LightningChart JS是強(qiáng)大的工具，可以用來(lái)為Web應(yīng)用程序創(chuàng)建視覺(jué)上吸引人的交互式蜘蛛圖。

使用ReactJS，用戶(hù)可以輕松地管理用戶(hù)界面組件并創(chuàng)建流暢的用戶(hù)體驗(yàn)，而LightningChart JS提供了必要的數(shù)據(jù)可視化工具，使其數(shù)據(jù)更加直觀(guān)。

蜘蛛圖可用于表示范圍廣泛的數(shù)據(jù)，從比較單個(gè)圖表上的多個(gè)變量到跟蹤一段時(shí)間內(nèi)的進(jìn)展。

通過(guò)使用ReactJS和LightningChart JS自定義蜘蛛圖表的能力，可以定制圖表以滿(mǎn)足特定需求，并使它們盡可能多地提供信息。

通過(guò)結(jié)合使用這兩種技術(shù)，可以創(chuàng)建既吸引人又易于使用的令人驚嘆的蜘蛛圖。

原文標(biāo)題：Create Spider Chart With ReactJS，作者：Omar Urbano