龙空技术网

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

葡萄城GrapeCity 89

前言:

现时大家对“js动态添加表格数据”都比较重视,你们都想要剖析一些“js动态添加表格数据”的相关文章。那么小编也在网络上汇集了一些关于“js动态添加表格数据””的相关内容,希望咱们能喜欢,你们一起来了解一下吧!

前言

在如何将实时数据显示在前端电子表格中(一)一文中,我们讲述了如何通过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 sheetsfunction 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 chartfunction addLineData(lastPrice) {if (lineData.length >= lineDataMaxSize)lineData.shift();stockCounter++;// Only add the data to the list for the line chart if the data has changedif (lastPrice != lineData[lineData.length-1].Value) {lineData.push({ Value:lastPrice });}}
添加折线图

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

// Add the line chartfunction addChart() {// Define the area to load the chart intovar 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 chartchart.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 valueschart.axes({primaryValue: {min: openPrice - chartAxisRange,max: openPrice + chartAxisRange},primaryCategory: {visible: false}});// Add data labels to the chartchart.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 chartchart.legend({visible: false});// Change the color of the chartchart.chartArea({backColor: "black",color: "white"})}
运行程序

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

node index.js

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

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

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

了解更多信息,欢迎私信我们,或者发送产品关键词“SpreadJS”。

标签: #js动态添加表格数据 #js中用图片显示实时时间 #前端实时获取数据