将脚本库应用于时间轴

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

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

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

Add https://www.gstatic.com/charts/loader.js 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 小部件吗？

感谢任何人可以提供的任何帮助。

一个帖子里有很多问题，我只回答第一个问题。 从模型对象显示您自己的数据应该很简单。

首先是结果：:-)

Steps:

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()从 App Maker 小部件获取 DOM 对象。

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