利用 SpreadJS COVID-19 疫情数据动态显示（美国）

SpreadJS提供并支持强大的计算引擎，易于使用的模板构建器以及通过URL连接数据的简便方法。本教程讨论如何通过在使用SpreadJS的Designer创建的仪表板模板中直观地显示URL来利用URL的导入数据。这是通过使用URL数据作​​为在Designer中创建的模板的单元格绑定数据源来完成的。

本教程将使用COVID-19跟踪项目的数据API提供数据端点，以便在SpreadJS实例中显示和使用。

本示例中的数据来自 https://covidtracking.com/
最终效果如下图：



步骤：

• 创建并应用仪表板模板
• 创建组合框单元格类型
• 将URL数据设置为单元格绑定数据源
  

步骤1：建立模板
在本节中，我们将使用SpreadJS创建模板，然后在页面加载时将URL数据设置为模板的数据源，从而使用URL数据填充该模板。

SpreadJS提供了SpreadJS的Runtime Designer和在线Designer。设计人员提供了一个模板生成器选项，以后可以使用单元格绑定来填充数据。模板生成器位于“数据” 选项卡下。


使用AutoGenerateLabel选项自动创建绑定路径标签。对于此演示，添加以下内容：

• 州
• dataQualityGrade
• 正增加和负增加
• 待定
• 目前住院
• 目前影响
• onVentilator当前
• 死亡
• 已恢复
• totalTestResults
  

您可以选择一个单元格，然后双击生成的节点或将该节点拖动到所需的区域。然后，您可以设计单元格，就像您希望看到绑定时显示的数据一样。

使用设计器时，还可以使用图表，迷你图，形状和所有样式格式。这就是我们为此演示目的设计模板的方式。

可以使用设计器将SpreadJS应用于模板的另一个功能是超链接。对于我们的示例，我们将在COVID跟踪项目主站点的右下角单元格中添加一个超链接。我们将在此示例中使用的URL是https://covidtracking.com/。

要添加此超链接，请选择单元格，右键单击并选择“链接”，然后粘贴链接，如下所示：


完成创建仪表板模板后，将实例导出为JavaScript文件。以下是描述如何使用Designer进行操作的gif文件，请注意，我们将JavaScript文件模板命名为。

以下是下载为此示例创建的仪表板模板的链接： template.js (30.9 KB, 下载次数: 142)

2021-2-1 12:20 上传

点击文件名下载附件
从JSON仪表板导入模板并刷新实例
最后一步：将template.js文件包含在我们的项目中，然后使用SpreadJS'fromJSON和refresh方法，从仪表板模板加载SpreadJS，然后刷新实例。

HTML标签中包含模板JSON文件template.js：

1. <!-- Include the template javascript file exported from the runtime designer   -->
   
2.     <script src="template.js" type="text/javascript"></script></td>

复制代码

然后使用fromJSON和refresh方法从模板加载SpreadJS实例。这是一个代码片段：

1. var spread = new GC.Spread.Sheets.Workbook(  
   
2.             document.getElementById("ss")  
   
3.           );  
   
4.           var spreadNS = GC.Spread.Sheets;  
   
5.         // 1.2 - Load SpreadJS from the template created with runtime designer  
   
6.             spread.fromJSON(template);  
   
7.             spread.options.showHorizontalScrollbar = false;  
   
8.             spread.options.showVerticalScrollbar = false;  
   
9.             spread.options.tabStripVisible = false;
   
10. 
    
11.         // 1.2 - Refresh the spread instance  
    
12.           spread.refresh();
    
13. 
    
14.           var sheet = spread.getActiveSheet();  
    
15.               sheet.options.colHeaderVisible = false;  
    
16.               sheet.options.rowHeaderVisible = false;

复制代码

步骤2：建立ComboBox储存格类型
创建一个下拉式ComboBox单元格类型，以选择最终用户要查看其信息的状态。创建组合框后，我们将单元格类型和默认值设置为单元格B1（0,1）：

1. // 2.1 - Create combo box cell type for state selection  
   
2.          var combo = new spreadNS.CellTypes.ComboBox();  
   
3.               combo  
   
4.               .items([  
   
5.               { text: "Select a State", value: "" },  
   
6.               { text: "AL", value: "AL" },  
   
7.               { text: "AK", value: "AK" },  
   
8.               { text: "AZ", value: "AZ" },  
   
9.               { text: "AR", value: "AR" },  
   
10.               { text: "CA", value: "CA" },  
    
11.               { text: "CO", value: "CO" },  
    
12.               { text: "CT", value: "CT" },  
    
13.               { text: "DE", value: "DE" },  
    
14.               { text: "DC", value: "DC" },  
    
15.               { text: "FL", value: "FL" },  
    
16.               { text: "GA", value: "GA" },  
    
17.               { text: "HI", value: "HI" },  
    
18.               { text: "ID", value: "ID" },  
    
19.               { text: "IL", value: "IL" },  
    
20.               { text: "IN", value: "IN" },  
    
21.               { text: "IA", value: "IA" },  
    
22.               { text: "KS", value: "KS" },  
    
23.               { text: "KY", value: "KY" },  
    
24.               { text: "LA", value: "LA" },  
    
25.               { text: "ME", value: "ME" },  
    
26.               { text: "MD", value: "MD" },  
    
27.               { text: "MA", value: "MA" },  
    
28.               { text: "MI", value: "MI" },  
    
29.               { text: "MN", value: "MN" },  
    
30.               { text: "MS", value: "MS" },  
    
31.               { text: "MO", value: "MO" },  
    
32.               { text: "MT", value: "MT" },  
    
33.               { text: "NE", value: "NE" },  
    
34.               { text: "NV", value: "NV" },  
    
35.               { text: "NH", value: "NH" },  
    
36.               { text: "NJ", value: "NJ" },  
    
37.               { text: "NM", value: "NM" },  
    
38.               { text: "NY", value: "NY" },  
    
39.               { text: "NC", value: "NC" },  
    
40.               { text: "ND", value: "ND" },  
    
41.               { text: "OH", value: "OH" },  
    
42.               { text: "OK", value: "OK" },  
    
43.               { text: "OR", value: "OR" },  
    
44.               { text: "PA", value: "PA" },  
    
45.               { text: "RI", value: "RI" },  
    
46.               { text: "SC", value: "SC" },  
    
47.               { text: "SD", value: "SD" },  
    
48.               { text: "TN", value: "TN" },  
    
49.               { text: "TX", value: "TX" },  
    
50.               { text: "UT", value: "UT" },  
    
51.               { text: "VT", value: "VT" },  
    
52.               { text: "VA", value: "VA" },  
    
53.               { text: "WA", value: "WA" },  
    
54.               { text: "WV", value: "WV" },  
    
55.               { text: "WI", value: "WI" },  
    
56.               { text: "WY", value: "WY" },  
    
57.             ])  
    
58.               .editorValueType(spreadNS.CellTypes.EditorValueType.text);  
    
59.           // 2.1 - Set the default value of select a state  
    
60.              sheet  
    
61.              .getCell(0, 1, spreadNS.SheetArea.viewport)  
    
62.              .cellType(combo)  
    
63.              .value("Select a State");

复制代码

步骤3：将URL数据设置为单元绑定数据源
现在，我们将看到应用于单元格B1的comboBox单元格类型。接下来，当用户从ComboBox中选择一个项目时，我们将创建一个自定义函数。

3.1将实例绑定到CellChanged事件
首先，我们必须使用更改时从ComboBox单元格类型返回的值来确定最终用户选择的状态。为此，我们必须首先设置将CellChanged事件绑定到SpreadJS实例，如下所示：

1. // 3.1 - Bind the CellChanged event to trigger when a new item is selected from the from comboBox  
   
2.           spread.bind(GC.Spread.Sheets.Events.CellChanged, (e, args) => {  
   
3.             if (args.propertyName === "value") {  
   
4.               var cellType = args.sheet.getCellType(args.row, args.col);  
   
5.               if (  
   
6.                 !cellType ||  
   
7.                 !(cellType instanceof GC.Spread.Sheets.CellTypes.ComboBox)  
   
8.               ) {  
   
9.                 return;  
   
10.               }  
    
11.               var state = args.newValue.toLowerCase();  
    
12.               // Test: The state selected should alert when selected  
    
13.               alert(state);  
    
14.               // 3.2 - use the selected state for API's url to get the data  
    
15.               var apiUrl =  
    
16.                 "https://covidtracking.com/api/v1/states/" +  
    
17.                 state +  
    
18.                 "/current.json";  
    
19.               // Test: The Covid Tracking Projects state API's URL should appear in console  
    
20.                 console.log(apiUrl);  
    
21.             }  
    
22.           });

复制代码

3.3获取并设置URL数据作&#8203;&#8203;为单元格绑定源
如果两个测试均按预期进行，那么您现在可以删除第3.1和3.2部分中包含的警报和控制台。接下来，将getJSON方法与步骤3.2中创建的URL结合使用，以从URL中的API获取JSON数据，然后将返回的数据设置为工作表单元绑定数据源，如下所示，标记为3.3：

1. // 3.1 - Bind the CellChanged event to trigger when a new item is selected from the from comboBox  
   
2.           spread.bind(GC.Spread.Sheets.Events.CellChanged, (e, args) => {  
   
3.             if (args.propertyName === "value") {  
   
4.               var cellType = args.sheet.getCellType(args.row, args.col);  
   
5.               if (  
   
6.                 !cellType ||  
   
7.                 !(cellType instanceof GC.Spread.Sheets.CellTypes.ComboBox)  
   
8.               ) {  
   
9.                 return;  
   
10.               }  
    
11.               var state = args.newValue.toLowerCase();  
    
12.               // 3.2 - use the selected state for API's url to get the data  
    
13.               var apiUrl =  
    
14.                 "https://covidtracking.com/api/v1/states/" +  
    
15.                 state +  
    
16.                 "/current.json";  
    
17.                 // 3.3 - getJSON data from URL  
    
18.                 $.getJSON(apiUrl, function (data) {  
    
19.                 spread.suspendPaint();  
    
20.                 spread.suspendCalcService();  
    
21.                 // 3.3 - Set the URL's data as the sheets data source  
    
22.                 sheet.setDataSource(  
    
23.                   new GC.Spread.Sheets.Bindings.CellBindingSource(data)  
    
24.                 );  
    
25.                 spread.refresh();  
    
26.                 spread.resumeCalcService();  
    
27.                 spread.resumePaint();  
    
28.               });  
    
29.             }  
    
30.           });

复制代码

在应用了所有步骤的代码逻辑并创建并应用了Runtime Designer模板之后，您的SpreadJS应用程序将使用随Designer一起添加的模板的单元格绑定路径来显示数据。

3.4修改SpreadJS视口
然后，我们将修改SpreadJS视口，以删除列和行标题，垂直和水平滚动条以及标签栏。通过将工作表选项colHeaderVisible和rowHeaderVisible设置为false，然后将工作簿选项showHorizo&#8203;&#8203;ntalScrollbar，showVerticalScrollbar和tabStripVisible设置为可完成此操作。

1. // 3.4) Modify the viewport  
   
2.           var sheet = spread.getActiveSheet();  
   
3.             sheet.options.colHeaderVisible = false;  
   
4.             sheet.options.rowHeaderVisible = false;  
   
5.             spread.options.showHorizontalScrollbar = false;  
   
6.             spread.options.showVerticalScrollbar = false;  
   
7.             spread.options.tabStripVisible = false;

复制代码

您已完成本教程，并且使用SpreadJS，可以使用运行时设计器创建模板，创建单元格类型，从URL设置数据源，使用事件加载数据以及修改SpreadJS视图端口。