google-app-maker - 将脚本库应用于时间轴

Question

这是我之前问题的后续。如果这个问题太复杂而无法在这里回答，我深表歉意。

我试图能够在时间线 View 中显示我的数据。我在这里找到了 Google 的时间线脚本:https://developers.google.com/chart/interactive/docs/gallery/timeline

但我不确定我这样做是否正确。我假设我应该:

添加https://www.gstatic.com/charts/loader.js在我的应用程序的“设置”部分下。

那么我是否将此代码作为客户端脚本插入？

google.charts.load('current', {'packages':['timeline']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var container = document.getElementById('timeline');
        var chart = new google.visualization.Timeline(container);
        var dataTable = new google.visualization.DataTable();

        dataTable.addColumn({ type: 'string', id: 'President' });
        dataTable.addColumn({ type: 'date', id: 'Start' });
        dataTable.addColumn({ type: 'date', id: 'End' });
        dataTable.addRows([
          [ 'Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
          [ 'Adams',      new Date(1797, 2, 4),  new Date(1801, 2, 4) ],
          [ 'Jefferson',  new Date(1801, 2, 4),  new Date(1809, 2, 4) ]]);

        chart.draw(dataTable);
      }

如果是这样，我会很困惑，因为我收到错误:drawChart 在定义之前就被使用了。

当时我希望将“华盛顿”替换为@datasources.item.FieldName，将日期替换为@datasources.item.StartDate 和@datasources.item.EndDate。

但也许我完全误解了这实际上是如何运作的。

另外，为了实际显示表格，我会使用 HTML 小部件吗？

感谢您提供的任何帮助。

Answer 1

您在一篇文章中提出了很多问题，我只回答第一个问题。 从模型对象显示您自己的数据应该很简单。

首先是结果::-)

步骤:

1. 在“应用程序设置”中的“外部资源”下，添加 JavaScript URL:https://www.gstatic.com/charts/loader.js

2. 客户端脚本应如下所示:

   function showChart(widget){
       google.charts.load('current', {'packages':['timeline']});
       function drawChart() {
          var container = widget.getElement();
          var chart = new google.visualization.Timeline(container);
          var dataTable = new google.visualization.DataTable();
          dataTable.addColumn({ type: 'string', id: 'President' });
          dataTable.addColumn({ type: 'date', id: 'Start' });
          dataTable.addColumn({ type: 'date', id: 'End' });
          dataTable.addRows([
             [ 'Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
             [ 'Adams',      new Date(1797, 2, 4),  new Date(1801, 2, 4) ],
             [ 'Jefferson',  new Date(1801, 2, 4),  new Date(1809, 2, 4) ]]);
         chart.draw(dataTable);
       }
       google.charts.setOnLoadCallback(drawChart);
   }
   

请注意，Google 使用非标准 Javascript，要求在使用方法之前先声明方法，因此 setOnLoadCallback必须在 drawChart 声明之后进行。另请注意 widget.getElement() 的使用从应用程序制作工具小部件获取 DOM 对象。

将 HTML 小部件添加到页面，为其指定所需的宽度和高度，然后在其上 onAttach事件，添加调用 showChart(widget);