软件介绍：
本软件适用上班时不方便打开股票软件进行盯盘，可以利用此小工具悄悄

盯盘。缩小了界面，不容易被周围同事看见。

1、5秒后将进入软件盯盘模式，已经开启了自动刷新，会根据网络接口刷新实时数据。（所以必须联网使用）

下图分为：红绿模式，全黑模式，无标题模式。

窗体为透明模式，鼠标点中字可以随意拖拽。

3、设置需要显示的字段

4、设置界面，添加股票只需在输入框输入代码后敲击回车即可。

4、预警模式分2种，1 右下角弹窗 2 刷新界面，可自定义快捷键隐藏窗口。

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

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

整体的操作步骤包含：

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

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

3、使用 SpreadJS 中的数据

4、为折线图添加数据

5、添加折线图

6、运行程序

在了解每个功能之前，需要先解释一下程序的主要结构。本例中共包含两张数据表，第一张为“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 的其他强大功能，可前往葡萄城官网立即下载试用版。

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

上一篇：房租1000元一个月交多少税,1000元炒股一个月

下一篇：模拟炒股软件哪个好一点跟模拟炒股软件有用吗