實用教程丨如何將實時數據顯示在前端電子錶格中（一）

来源:https://www.cnblogs.com/powertoolsteam/archive/2023/05/19/17413966.html
-Advertisement-
Play Games

Author Alex Zhang Category SpreadJS Tags SpreadJS，前端電子錶格，實時數據，RealTime Data 前言 數據（包括股票、天氣和體育比分）在不斷更新為新信息時最為有用。SpreadJS是一個非常通用的 JavaScript 電子錶格組件，它還可以輕 ...


   

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 [email protected] 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


本文是由葡萄城技術開發團隊發佈，轉載請註明出處：葡萄城官網



您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Java中List集合有哪些特性？（內含視頻教程）
    **本文將為大家詳細講解Java中的List集合，這是我們進行開發時經常用到的知識點，也是大家在學習Java中很重要的一個知識點，更是我們在面試時有可能會問到的問題。** **文章較長，乾貨滿滿，建議大家收藏慢慢學習。文末有本文重點總結，主頁有全系列文章分享。技術類問題，歡迎大家和我們一起交流討論！ ...
  • Lerna 備忘清單_開發速查表分享
    ## Lerna 備忘清單 lerna 是一種多包管理工具， 可以讓你在主項目下管理多個子項目，從而解決了多個包互相依賴，且發佈時需要手動維護多個包的問題，每個 package 都有自己的依賴項（package.json），能夠作為獨立的 npm package 發佈，只是源碼放在一起維護，公共包可 ...
  • Less 備忘清單_開發速查表分享
    Less 備忘清單 Less 是一門CSS預處理語言，它擴充了CSS語言，增加了諸如變數、混合（mixin）、函數等功能，讓CSS更易維護、方便製作主題、擴充。Less可以運行在Node.js或瀏覽器端。 Less開發速查清單本備忘單旨在快速理解 Less 所涉及的主要概念，顯示了它的常用方法使用清 ...
  • 從零玩轉Nginx
    01【熟悉】實際開發中的問題？ 現在我們一個項目跑在一個tomcat裡面 當一個tomcat無法支持高的併發量時。可以使用多個tomcat 那麼這多個tomcat如何雲分配請求 |-nginx 02【熟悉】伺服器概述 1，目前常見的web伺服器 1，Apache(http://httpd.apach ...
  • 驅動開發：通過應用堆實現多次通信
    在前面的文章`《驅動開發：運用MDL映射實現多次通信》`LyShark教大家使用`MDL`的方式靈活的實現了內核態多次輸出結構體的效果，但是此種方法並不推薦大家使用原因很簡單首先內核空間比較寶貴，其次內核裡面不能分配太大且每次傳出的結構體最大不能超過`1024`個，而最終這些記憶體由於無法得到更好的釋... ...
  • Linux網路編程：socket & pthread_create()多線程 實現clients/server通信
    一、問題引入 Linux網路編程：socket & fork()多進程 實現clients/server通信 隨筆介紹了通過fork()多進程實現了伺服器與多客戶端通信。但除了多進程能實現之外，多線程也是一種實現方式。 重要的是，多進程和多線程是涉及操作系統層次。隨筆不僅要利用pthread_cre ...
  • Windows10安裝Jmeter(圖文教程）
    Apache JMeter是Apache組織開發的基於Java的壓力測試工具。用於對軟體做壓力測試，它最初被設計用於Web應用測試，但後來擴展到其他測試領域。 它可以用於測試靜態和動態資源，例如靜態文件、Java 小服務程式、CGI 腳本、Java 對象、資料庫、FTP 伺服器， 等等。JMeter ...
  • 37基於java的職工管理系統設計與實現
    基於java的職工管理系統設計與實現，員工管理系統，企業員工管理系統，公司員工管理系統，企業人事管理系統，基於java職工管理系統，前後端分離，員工考勤管理系統，職工獎懲管理系統，職員合同管理，HR管理系統，人事HR管理系統。 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類