实用教程丨如何将实时数据显示在前端电子表格中

Posted 2023-05-22 葡萄城技术团队

本文由葡萄城技术团队于博客园原创并首发

转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。

前言

在如何将实时数据显示在前端电子表格中（一）一文中，我们讲述了如何通过WebSocket从Finnhub.IO获取实时数据，那么本文重点讲述如何使用基本的 SpreadJS 功能来进行数据展示。

在本教程中，我们将使用 Node.JS Express 和 WebSocket，因此请确保从此处安装最新版本。我们还将使用 Visual Studio Code，因此以管理员身份运行它，以便 NPM 命令可以在终端中运行。其中，SpreadJS 使用的版本为SpreadJS V16.0。

整体的操作步骤包含：

1、设置应用程序（可关联至 如何将实时数据显示在前端电子表格中（一））

2、连接到数据源（可关联至 如何将实时数据显示在前端电子表格中（一））

3、使用 SpreadJS 中的数据

4、为折线图添加数据

5、添加折线图

6、运行程序

使用 SpreadJS 中的数据

在了解每个功能之前，需要先解释一下程序的主要结构。本例中共包含两张数据表，第一张为“Stock_Ticker”，第二张为“Data_Sheet”。数据可以通过单元级数据绑定直接绑定到 SpreadJS 实例中的第一个工作表“Stock_Ticker”。

“Data_Sheet”是自程序启动以来积压的股票开盘价。通常最好是跟踪自特定日期以来记录的值，但为了简化此程序，本例中仅基于程序开始时间，大约有十个最近的值。值的积压就是折线图需要显示的内容。

当在设计器中定义了模板并且格式与数据源的格式相匹配时，就可以使用“bindData”函数中调用的setDataSource 函数在工作表中进行设置。

此外，还可以为工作表“Data_Sheet”设置数据源，并能够从数据中自动生成列，因为我们不关心该工作表上的格式：

// Bind the data source for both of the sheets
function bindData() 
activeSheet.setDataSource(new GC.Spread.Sheets.Bindings.CellBindingSource(dataSource));
dataSheet.autoGenerateColumns = true;
dataSheet.setDataSource(lineData);

为折线图添加数据

下一个要定义的函数是“addLineData”函数，它使用本教程前面定义的数组，并在每次从数据源接收到新值时为其添加一个值（如果该值与之前的值不同）：

// Add data with each update for the line chart
function addLineData(lastPrice) 
if (lineData.length >= lineDataMaxSize)
lineData.shift();
stockCounter++;
// Only add the data to the list for the line chart if the data has changed
if (lastPrice != lineData[lineData.length-1].Value) 
lineData.push( Value:lastPrice );

添加折线图

我们可以通过在绑定到 lineData 数据源的“Data_Sheet”工作表中指定的单元格范围来创建折线图。我们还可以更改标题、轴、数据标签、图例和图表区域的格式——所有这些都在“addChart”函数内：

// Add the line chart
function addChart() 
// Define the area to load the chart into
var startCellRect = activeSheet.getCellRect(11, 1);
var endCellRect = activeSheet.getCellRect(24, 9);
var chartStart = 
x: startCellRect.x,
y: startCellRect.y
;
var chartArea = 
width: endCellRect.x-startCellRect.x,
height: endCellRect.y-chartStart.y

chart = activeSheet.charts.add(\'line\',
GC.Spread.Sheets.Charts.ChartType.line,
chartStart.x,
chartStart.y,
chartArea.width,
chartArea.height,
\'Data_Sheet!$A$1:$A$\' + lineDataMaxSize
);

chart.allowMove(false);

// Set the title of the chart
chart.title(
text: activeSheet.getValue(2,1),
color: "white"
);

 

// Change the values on the y-axis to show changes easier
// Hide the x-axis values, we only care about changes, not specific time values
chart.axes(
primaryValue: 
min: openPrice - chartAxisRange,
max: openPrice + chartAxisRange
,
primaryCategory: 
visible: false

);

// Add data labels to the chart
chart.dataLabels(
color: "white",
format: "0.00",
position: GC.Spread.Sheets.Charts.DataLabelPosition.above,
showValue: true
);

// Hide the legend; there is only one series used in this chart
chart.legend(
visible: false
);

// Change the color of the chart
chart.chartArea(
backColor: "black",
color: "white"
)

运行程序

添加所有代码后，运行程序就很容易了。在 Visual Studio Code 中打开终端并键入：

node index.js

然后在网络浏览器中导航到 localhost:3000：

 

从下拉菜单中选择一只股票以加载数据：

 

至此，一个在 SpreadJS 中使用实时数据源的简单示例就完成啦。借助 SpreadJS 中图表和数据绑定的强大功能，您可以做的不仅仅是显示数据。想要尝试该功能或查看 SpreadJS 的其他强大功能，可前往葡萄城官网立即下载试用版。

---

本文是由葡萄城技术开发团队发布，转载请注明出处：葡萄城官网

如何删除 vlookup 函数但实用地保留 perl 电子表格中的值

【中文标题】如何删除 vlookup 函数但实用地保留 perl 电子表格中的值

【英文标题】：How to remove vlookup function but keep the value in pragmatically from perl spreadsheet

【发布时间】：2014-08-25 05:06:11

【问题描述】：

我正在使用 perl 电子表格生成一个 xl 文件，它包含一列的“vlookup”函数，从 vlookup 函数生成的值是正确的，但我想删除这个公式并只保留它的值，

如何做到这一点？

我正在使用

Excel 2007 SP2 电子表格::WriteExcel: 2.40

【问题讨论】：

计算 perl 脚本中的值并将其插入？不知道你在这里可能还有什么意思。

实际上我的 vlookup 功能就像这样 'VLOOKUP(B2,config!$B$4:$C$13,2,FALSE)'。 'config!$B$4:$C$13' 值从输入 xl 文件读取并将计算数据写入新的 XL 文件并将输入文件的 'config' 表添加到新创建的文件中，因此在 perl 中不容易做到脚本

如果你不想让 excel 来评估函数，也不想在 perl 中做，那么我不确定你打算在哪里评估它。

【参考方案1】：

=VLOOKUP 是一个 Excel 函数。也就是说，Excel 知道如何计算其结果。 Perl 没有。

如果您想用 Perl 程序计算的值替换 Excel 工作表中的 VLOOKUP 函数调用，您将不得不编写一个行为与 Excel 的 VLOOKUP 完全匹配的 Perl 函数 VLOOKUP，并在找到包含VLOOKUP 的单元格时调用它。

另一方面，如果您不使用Spreadsheet::WriteExcel，而是使用Win32::OLE，则可以将单元格替换为其值。