譯者 | 李睿

審校 | 重樓

本文介紹用戶如何使用ReactJS和LightningChartJS（LCJS）庫創建JavaScript蜘蛛圖。

什么是ReactJS？

ReactJS是Facebook創建的一個框架，在開發時非常注重實現用戶界面。

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

因此在本文中，將對React項目進行初步設置，并簡要實現LightningChart，以展示庫在該項目中的使用。

1.安裝ReactJS

為了使用命令安裝ReactJS，需要安裝Node JS和NPM命令接口。此外，還可以訪問NPM官方文檔頁面。

因此，在安裝了NPM之后，可以執行ReactJS安裝命令。首先，用戶需要以管理員身份打開命令提示符并運行以下命令：

npm i -g create-react-app 

上述命令將下載完整的React庫。一旦React安裝完成，將看到一個React命令列表，作為安裝成功的確認。

現在將創建一個React項目。將在命令提示符中執行以下命令：

npx create-react-app lc-react-app

lc-react-app將設定項目的默認名稱，也可以更改名稱。

在創建項目后，將顯示項目所存儲的路徑。建議將項目剪切粘貼到一個易于訪問的路徑中。

2.配置項目

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

這個項目看起來應該與上圖相同或相似?，F在打開一個新終端，這樣就可以安裝LightningChart JS了。以下命令npm i@arction/lcjs將LightningChart JS庫安裝到項目中。

現在，如果執行npm start命令，將能夠在本地服務器上編譯和查看頁面。

在本地服務器上編譯ReactJS項目

3.創建蜘蛛圖

在開始編寫圖表代碼之前，必須理解將要使用的文件。

與Angular不同的是，視圖和邏輯是按組件分組的，React從一個更簡單的結構開始。首先，將看到兩個JS文件：index.JS和App.JS。

這些文件有一個默認的命名，但可以根據需要重命名。索引文件將包含允許呈現App.js文件創建的視圖的代碼。

App.js包含了負責構建將要呈現的對象的邏輯。CSS文件將修改在相應的JS文件中生成的對象的樣式。

當用戶創建一個React項目時，會生成一個App.test.js文件。這個文件對應于App.js文件，可以使用npm test命令來測試代碼。

其基本思想是，每個生成的JS文件都有一個.test文件。對于這個項目，將創建一個名為SpiderChart.js的新文件。

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

A)導入必要的類

將從導入必要的LightningChart JS類開始。導入組件的方法與Angular中使用的方法相同。

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

現在，必須創建一個對象，該對象包含圖表，并且可以反過來將其導出到其他實例。

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

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

現在，將對象類型“Spider”分配給常量“chart”。當指定圖表類型時，也可以分配屬性。例如，可以指定組件的外觀以及圖表將要顯示的容器。

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：圖表的標題。默認情況下，標題將顯示在圖表的頂部。
• setAxisInterval：設置圖表軸的間隔。
• setScaleLabelStrategy：設置繪制比例標簽的策略。它定義了繪制哪些位置標簽以及是否翻轉這些標簽。
• addSeries：addSeries函數將允許創建一個獨立的數據系列，以顯示在圖表上。這些系列可能具有獨立的視覺屬性和值。

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：當光標位于序列上時，它允許顯示序列中的值。
• setPointSize：指定每個點的像素大小。

C)為每個點添加標簽

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 )

根據系列的不同，必須改變索引的數量。

E)創建LegendBox

創建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：如果示例用戶界面元素占用太多空間，則自動丟棄它們。這是為了避免糟糕的手機用戶界面。
• legend.add：將圖例框添加到圖表中。

F)返回函數

返回函數將在組件卸載時破壞圖形。圖表將存儲在容器(id)中。類名“chart”將用于應用App.css文件中的CSS類。

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)效果圖

為了渲染圖表對象，需要將它導入到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對象。同樣，可以為主體應用CSS類。CSS類位于App.css文件中。App常量將被導出到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導入到index.js中。在JS文件之間導入/導出對象的方法在幾乎所有情況下都是相似的。對于Index文件，需要應用一些React屬性，因為這里是操作DOM的地方。

嚴格模式：嚴格模式檢查只在開發模式下運行。它們不會影響產品構建。

4.最終的應用程序

總之，ReactJS和LightningChart JS是強大的工具，可以用來為Web應用程序創建視覺上吸引人的交互式蜘蛛圖。

使用ReactJS，用戶可以輕松地管理用戶界面組件并創建流暢的用戶體驗，而LightningChart JS提供了必要的數據可視化工具，使其數據更加直觀。

蜘蛛圖可用于表示范圍廣泛的數據，從比較單個圖表上的多個變量到跟蹤一段時間內的進展。

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

通過結合使用這兩種技術，可以創建既吸引人又易于使用的令人驚嘆的蜘蛛圖。

原文標題：Create Spider Chart With ReactJS，作者：Omar Urbano