Question

这是我之前的问题的后续跟进。如果这太复杂而无法回答，我道歉。

我试图能够在时间线视图中显示我的数据。我在这里找到了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。

我当时正在希望我会换掉华盛顿＆＃39;对于@ datasources.item.FieldName以及@ datasources.item.StartDate和@ datasources.item.EndDate的日期。

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

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

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

Answer 1

你在一篇文章中有很多问题，我只回答第一篇。从模型对象显示您自己的数据应该是微不足道的。

首先结果:: - ）

步骤：

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

客户端脚本应如下所示：

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对象。

向页面添加HTML小部件，为其指定所需的宽度和高度，并在onAttach事件中添加对showChart(widget);的调用

为时间轴应用脚本库

1 个答案: