實用教程丨如何將實時資料顯示在前端電子表格中（一）

葡萄城技術團隊發表於2023-05-19
前端
 
 

Author

Alex Zhang

Category

SpreadJS

Tags

SpreadJS，前端電子表格，實時資料，RealTime Data

 

 

 

前言

資料（包括股票、天氣和體育比分）在不斷更新為新資訊時最為有用。SpreadJS是一個非常通用的 JavaScript 電子表格元件，它還可以輕鬆地使用、顯示並透過資料繫結提供實時資料更新。

我們將使用WebSocket從Finnhub.IO獲取實時資料，然後使用基本的 SpreadJS 功能來展示資料。要使用 Finnhub Stock API，您需要建立一個免費帳戶並生成您的 API 金鑰，我們稍後將在該應用程式中使用該金鑰。

在本教程中，我們將使用 Node.JS Express 和 WebSocket，因此請確保安裝最新版本。我們還將使用 Visual Studio Code，因此以管理員身份執行它，以便 NPM 命令可以在終端中執行。

JavaScript 實時資料示例

在此文中，我們將介紹如何按照以下步驟將實時資料合併到 JavaScript 電子表格中：

  1. 設定應用程式
  2. 連線到資料來源
  3. 使用 SpreadJS 中的資料
  4. 為折線圖新增資料
  5. 新增折線圖
  6. 執行程式

應用設定

我們可以從為應用程式建立一個資料夾開始。在這種情況下，我們將其命名為“實時資料”。接下來，需要在該資料夾中建立一個 package.json 檔案，用作專案的清單檔案。這可能包含類似於以下的內容：

{

    "name": "real-time-data",

    "version": "0.0.2",

    "description": "An app that imports real-time data into Spread JS",

    "dependencies": {}

}

 

對於這個應用程式，我們將使用 Express 作為 Web 框架和 WebSockets 來獲取實時資料，我們可以簡單地使用 npm 安裝它，也將使用它來安裝 SpreadJS 檔案。在 Visual Studio Code 終端中，您可以鍵入：

npm install --save express@4.18.2 finnhub websocket @grapecity/spread-sheets @grapecity/spread-sheets-charts

一旦安裝成功，就可以建立一個名為“index.js”的檔案來設定應用程式，其中會包含以下內容：

var express = require('express');

var app = express();

var http = require('http').Server(app);

app.use('/node_modules', express.static('node_modules'));

// Add code here

http.listen(3000, function(){

    console.log('Stock Ticker Started, connect to localhost:3000');

});

　　

現在就可以新增應用程式到 HTML 檔案中。在這種情況下，我們可以將檔案命名為“index.html”。然後繼續向HTML 檔案新增一些程式碼，包括對 SpreadJS 指令碼和 CSS 引用以及一些基本的初始化程式碼：

<!doctype html>

<html>

  <head>

    <title>Real Time Data</title>

  </head>

  <script type="text/javascript" src="stockTemplate.js"></script>

  <link href="/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css" rel="stylesheet" type="text/css" />

  <script src="/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js"></script>

  <script src="/node_modules/@grapecity/spread-sheets-charts/dist/gc.spread.sheets.charts.min.js" ></script>

  <script>

    window.onload = function() {

      // Initialize spread variables

      var spread = new GC.Spread.Sheets.Workbook(document.getElementById("spreadSheet"), { sheetCount: 1 });

      spread.fromJSON(stockTemplate);

      spread.options.scrollbarMaxAlign = true;

      spread.options.showHorizontalScrollbar = false;

      spread.options.showVerticalScrollbar = false;

      spread.options.grayAreaBackColor = 'rgb(38,38,38)';

      var activeSheet = spread.getActiveSheet();

      var dataSheet = spread.getSheet(1);

      activeSheet.clearSelection();

    }

  </script>

  <body>

    <div id="spreadSheet" style="width: 680px; height: 590px; border: 1px solid gray"></div>

  </body>

</html>

　　

在前面的程式碼片段中，我們使用了 spread.fromJSON() 來載入模板檔案。在下面的例子中，我們以股票資料顯示為背景建立相應的模板檔案。透過

使用 SpreadJS Designer，我們可以為資料來源建立資料標籤和繫結、格式化單元格、刪除網格線和標題，併為圖表新增一個區域。同時，

提供名為“stockTemplate.js”的模板檔案。

想要從設計器中匯出到 JS，可以單擊“檔案”>“匯出”並選擇“匯出 JavaScript 檔案”。在本教程中，我們將該模板檔案（stockTemplate.js）與 index.js 和 index.html 檔案放在同一資料夾中。

回到 index.js 檔案，我們需要使用以下程式碼告訴程式來提供 HTML 檔案和模板：

app.get('/', function(req, res){

    res.sendFile(__dirname + '/index.html');

});

// Required to load template file

app.get('/stockTemplate.js', function(req, res){

    res.sendFile(__dirname + '/stockTemplate.js');

});

　　

同時，在 index.html 檔案中，可以透過新增指令碼來載入該模板檔案：

<script type="text/javascript" src="stockTemplate.js"></script>

　　

要完成設定，還需要初始化稍後會用到的變數，並建立一個下拉單元格來選擇股票資料：

// Initialize variables

var stockSymbolLookup = [{text:'Apple Inc.', value:'AAPL'}, {text:'Microsoft Inc.', value:'MSFT'}, {text:'Google', value:'GOOGL'}];

var dataSource = [],

    lastPrice = 0,

    timeStamp = 0,

    volume = 0,

    stockCounter = 0,

    chart = null,

    chartAxisRange = 0.5,

    lineDataMaxSize = 10,

    lineData = new Array(lineDataMaxSize),

    initialData = true,

    socket,

    stock;

// Create a drop down for selecting a stock

var stockDropDown = new GC.Spread.Sheets.CellTypes.ComboBox().items(stockSymbolLookup);

activeSheet.getCell(2,1).cellType(stockDropDown);

　　

我們還可以為開盤價的變化設定特定的條件格式。

  • 綠色 = 正
  • 紅色 = 負

建立 SpreadJS Blazor 元件

在將 SpreadJS 放入 Blazor 應用程式之前，我們必須首先建立一個 Blazor 元件來包含 SpreadJS。

在本教程中，我們將使用 Visual Studio 2022 和 SpreadJS V16.0。

想要建立元件，首先要建立一個 Razor 類庫：

剃刀類庫

為簡單起見，您可以將其命名為“SpreadJS_Blazor_Lib”：

配置專案

建立專案後，我們需要將 SpreadJS 檔案複製到“wwwroot”資料夾。

連線到資料來源

在實際編寫程式碼連線到資料來源之前，我們需要新增一些程式碼來處理使用者從 Spread 的下拉選單中選擇股票的情況。只有這樣我們才能連線並獲取資料。為此，我們可以繫結到 EditEnded 事件，透過陣列查詢股票程式碼，然後連線到該股票資料：

// Bind an event for changing the stock in the drop down menu

// Set the stock variable to the newly selected stock from the list

activeSheet.bind(GC.Spread.Sheets.Events.EditEnded, function(e, info) {

    if(info.row === 2 && info.col === 1) {

      stock = stockSymbolLookup.find(stockLookup => stockLookup.text === activeSheet.getValue(2,1));

      connectToDataSource();

    }

  });

　　

這將呼叫一個我們建立的名為“connectToDataSource”的新函式：

// Handle connecting to the data source to get new stock information when the selected stock is changed

function connectToDataSource() {

    // Create a new WebSocket connected to the FinnHub Stock API with a personal token

    socket = new WebSocket('wss://ws.finnhub.io?token=<YOUR TOKEN HERE>');

    if (socket.readyState !== WebSocket.CLOSED)

      console.log("CONNECTED.");

    else

      console.log("NOT CONNECTED.");

     

    // When the socket first opens, set the length of the data source to zero, remove the line chart if

    // it exists, and send a message back to the server with the selected stock

    socket.addEventListener('open', function (event) {

      dataSource.length = 0;

      if (activeSheet.charts.get('line') != null)

        activeSheet.charts.remove('line');

      socket.send(JSON.stringify({'type':'subscribe', 'symbol':stock.value}));

    });

  }

　　

此程式碼使用 WebSocket 連線到資料來源，並傳入要訂閱的股票程式碼。

注意：初始化 WebSocket 時，您需要新增從 Finnhub.IO 生成的令牌。

此外，為保證資料在重置的過程中能夠得到正確的結果，我們需要增加activeSheet.charts.remove('line');，每次更改股票選擇時都會呼叫此函式。

當程式連線到資料來源並訂閱特定股票值時，程式將從該資料來源接收 JSON 資料形式的更新，我們需要解析這些資料並在 Spread 中進行使用。為此，我們可以使用事件偵聽器來偵聽來自 WebSocket 的訊息

// Listen for a message from the server

socket.addEventListener('message', function (event) {

    spread.suspendPaint();

    // Get the data from the server message

    var dataArray = JSON.parse(event.data)

    console.log(dataArray);

    if (dataArray.data && dataArray.data.length != 0) {

      // Set the data source and extract values from it

      var dataSource = dataArray.data[dataArray.data.length-1];

      lastPrice = dataSource.p;

      timeStamp = dataSource.t;

      volume = dataSource.v;

      // Fill in starting data for the line chart

      if (initialData) {

        lineData.fill({Value:lastPrice});

        setConditionalFormatting();

        initialData = false;

      }

      // Set the specific values in the spreadsheet

      activeSheet.setValue(4, 1, stock.value);

      activeSheet.setValue(5, 1, lastPrice);

      activeSheet.setValue(2, 7, lastPrice);

      activeSheet.setValue(4, 7, new Date(timeStamp));

      activeSheet.setValue(6, 7, volume);

      // Add the line chart if one doesn't exist

      if (activeSheet.charts.all().length == 0) {

        addChart();

      }

      addLineData(lastPrice);

      bindData();

    }

   

    spread.resumePaint();

  });

　　

在上面的程式碼中，我們遍歷資料來源並在工作表中填寫一些示例資料。同時，還呼叫了一些將被定義的函式：bindData、addLineData、addChart 和 setConditionalFormatting。

當資料被正確獲取之後，如何在SpreadJS中進行顯示，可以前往如何將實時資料顯示在前端電子表格中（二）中一探究竟。

歡迎訪問SpreadJS產品官網：https://www.grapecity.com.cn/developer/spreadjs

相關文章