2

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

我试图能够在时间线视图中显示我的数据。我在这里找到了来自 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 换掉“Washington”，用@datasources.item.StartDate 和@datasources.item.EndDate 换掉日期。

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

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

感谢您提供的任何帮助。

4

1 回答 1

3

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

首先是结果：:-)

在此处输入图像描述

脚步：

  1. 在 App Settings 中的 External Resources 下，添加 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 对象。

  1. 将 HTML 小部件添加到页面，为其指定所需的宽度和高度，然后在其onAttach事件中添加对showChart(widget);
于 2017-02-11T02:02:10.723 回答