AlexZ 发表于 2021-2-1 12:28:58

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

本帖最后由 AlexZ 于 2021-2-1 12:28 编辑

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文件模板命名为。

以下是下载为此示例创建的仪表板模板的链接：
从JSON仪表板导入模板并刷新实例
最后一步：将template.js文件包含在我们的项目中，然后使用SpreadJS'fromJSON和refresh方法，从仪表板模板加载SpreadJS，然后刷新实例。

HTML标签中包含模板JSON文件template.js：
<!-- Include the template javascript file exported from the runtime designer   -->
    <script src="template.js" type="text/javascript"></script></td>然后使用fromJSON和refresh方法从模板加载SpreadJS实例。这是一个代码片段：
var spread = new GC.Spread.Sheets.Workbook(
            document.getElementById("ss")
          );
          var spreadNS = GC.Spread.Sheets;
      // 1.2 - Load SpreadJS from the template created with runtime designer
            spread.fromJSON(template);
            spread.options.showHorizontalScrollbar = false;
            spread.options.showVerticalScrollbar = false;
            spread.options.tabStripVisible = false;

      // 1.2 - Refresh the spread instance
          spread.refresh();

          var sheet = spread.getActiveSheet();
            sheet.options.colHeaderVisible = false;
            sheet.options.rowHeaderVisible = false;步骤2：建立ComboBox储存格类型
创建一个下拉式ComboBox单元格类型，以选择最终用户要查看其信息的状态。创建组合框后，我们将单元格类型和默认值设置为单元格B1（0,1）：
// 2.1 - Create combo box cell type for state selection
         var combo = new spreadNS.CellTypes.ComboBox();
            combo
            .items([
            { text: "Select a State", value: "" },
            { text: "AL", value: "AL" },
            { text: "AK", value: "AK" },
            { text: "AZ", value: "AZ" },
            { text: "AR", value: "AR" },
            { text: "CA", value: "CA" },
            { text: "CO", value: "CO" },
            { text: "CT", value: "CT" },
            { text: "DE", value: "DE" },
            { text: "DC", value: "DC" },
            { text: "FL", value: "FL" },
            { text: "GA", value: "GA" },
            { text: "HI", value: "HI" },
            { text: "ID", value: "ID" },
            { text: "IL", value: "IL" },
            { text: "IN", value: "IN" },
            { text: "IA", value: "IA" },
            { text: "KS", value: "KS" },
            { text: "KY", value: "KY" },
            { text: "LA", value: "LA" },
            { text: "ME", value: "ME" },
            { text: "MD", value: "MD" },
            { text: "MA", value: "MA" },
            { text: "MI", value: "MI" },
            { text: "MN", value: "MN" },
            { text: "MS", value: "MS" },
            { text: "MO", value: "MO" },
            { text: "MT", value: "MT" },
            { text: "NE", value: "NE" },
            { text: "NV", value: "NV" },
            { text: "NH", value: "NH" },
            { text: "NJ", value: "NJ" },
            { text: "NM", value: "NM" },
            { text: "NY", value: "NY" },
            { text: "NC", value: "NC" },
            { text: "ND", value: "ND" },
            { text: "OH", value: "OH" },
            { text: "OK", value: "OK" },
            { text: "OR", value: "OR" },
            { text: "PA", value: "PA" },
            { text: "RI", value: "RI" },
            { text: "SC", value: "SC" },
            { text: "SD", value: "SD" },
            { text: "TN", value: "TN" },
            { text: "TX", value: "TX" },
            { text: "UT", value: "UT" },
            { text: "VT", value: "VT" },
            { text: "VA", value: "VA" },
            { text: "WA", value: "WA" },
            { text: "WV", value: "WV" },
            { text: "WI", value: "WI" },
            { text: "WY", value: "WY" },
            ])
            .editorValueType(spreadNS.CellTypes.EditorValueType.text);
          // 2.1 - Set the default value of select a state
             sheet
             .getCell(0, 1, spreadNS.SheetArea.viewport)
             .cellType(combo)
             .value("Select a State");步骤3：将URL数据设置为单元绑定数据源
现在，我们将看到应用于单元格B1的comboBox单元格类型。接下来，当用户从ComboBox中选择一个项目时，我们将创建一个自定义函数。

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

// 3.1 - Bind the CellChanged event to trigger when a new item is selected from the from comboBox
          spread.bind(GC.Spread.Sheets.Events.CellChanged, (e, args) => {
            if (args.propertyName === "value") {
            var cellType = args.sheet.getCellType(args.row, args.col);
            if (
                !cellType ||
                !(cellType instanceof GC.Spread.Sheets.CellTypes.ComboBox)
            ) {
                return;
            }
            var state = args.newValue.toLowerCase();
            // Test: The state selected should alert when selected
            alert(state);
            // 3.2 - use the selected state for API's url to get the data
            var apiUrl =
                "https://covidtracking.com/api/v1/states/" +
                state +
                "/current.json";
            // Test: The Covid Tracking Projects state API's URL should appear in console
                console.log(apiUrl);
            }
          });3.3获取并设置URL数据作​​为单元格绑定源
如果两个测试均按预期进行，那么您现在可以删除第3.1和3.2部分中包含的警报和控制台。接下来，将getJSON方法与步骤3.2中创建的URL结合使用，以从URL中的API获取JSON数据，然后将返回的数据设置为工作表单元绑定数据源，如下所示，标记为3.3：

// 3.1 - Bind the CellChanged event to trigger when a new item is selected from the from comboBox
          spread.bind(GC.Spread.Sheets.Events.CellChanged, (e, args) => {
            if (args.propertyName === "value") {
            var cellType = args.sheet.getCellType(args.row, args.col);
            if (
                !cellType ||
                !(cellType instanceof GC.Spread.Sheets.CellTypes.ComboBox)
            ) {
                return;
            }
            var state = args.newValue.toLowerCase();
            // 3.2 - use the selected state for API's url to get the data
            var apiUrl =
                "https://covidtracking.com/api/v1/states/" +
                state +
                "/current.json";
                // 3.3 - getJSON data from URL
                $.getJSON(apiUrl, function (data) {
                spread.suspendPaint();
                spread.suspendCalcService();
                // 3.3 - Set the URL's data as the sheets data source
                sheet.setDataSource(
                  new GC.Spread.Sheets.Bindings.CellBindingSource(data)
                );
                spread.refresh();
                spread.resumeCalcService();
                spread.resumePaint();
            });
            }
          });在应用了所有步骤的代码逻辑并创建并应用了Runtime Designer模板之后，您的SpreadJS应用程序将使用随Designer一起添加的模板的单元格绑定路径来显示数据。

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

// 3.4) Modify the viewport
          var sheet = spread.getActiveSheet();
            sheet.options.colHeaderVisible = false;
            sheet.options.rowHeaderVisible = false;
            spread.options.showHorizontalScrollbar = false;
            spread.options.showVerticalScrollbar = false;
            spread.options.tabStripVisible = false;
您已完成本教程，并且使用SpreadJS，可以使用运行时设计器创建模板，创建单元格类型，从URL设置数据源，使用事件加载数据以及修改SpreadJS视图端口。


页: [1]
查看完整版本: 利用 SpreadJS COVID-19 疫情数据动态显示（美国）