将脚本库应用于时间轴

本文介绍了将脚本库应用于时间轴的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

这是我上一个问题的跟进.如果这太复杂而无法在这里回答，我深表歉意.

This is a follow up to my previous question. I apologize if this is too complex to answer here.

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

I am trying to be able to show my data in a timeline view. I found a timeline script from Google here: https://developers.google.com/chart/interactive/docs/gallery/timeline

但是我不确定我是否正确执行了此操作.我假设我应该:

But I'm not sure I am doing this correctly. I'm assuming I am supposed to:

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

Add https://www.gstatic.com/charts/loader.js under the Settings section of my app.

那我要将此代码作为客户端脚本插入吗?

Then am I inserting this code as a client script?

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在定义之前就被使用了.

If so, I'm confused as I am getting an error: drawChart was used before it was defined.

那时我正在跳车，将华盛顿"换成@ datasources.item.FieldName，并将日期换成@ datasources.item.StartDate和@ datasources.item.EndDate.

I was then HOPING I would swap out 'Washington' for @datasources.item.FieldName and the dates for @datasources.item.StartDate and @datasources.item.EndDate.

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

But maybe I am totally misunderstanding how this could actually work.

还可以使用HTML小部件来实际显示表格吗?

Also to actually show the table would I be using an HTML widget?

感谢您提供任何帮助.

Thank you for any help anyone could offer.

推荐答案

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

You have many questions in one post, I will only answer the first one.It should be trivial to show your own data from a model object.

首先得到结果::-)

步骤:

在应用程序设置"的外部资源"下，添加JavaScript URL:https://www.gstatic.com/charts/loader.js
客户端脚本应如下所示:

In App Settings, under External Resources, add JavaScript URL: https://www.gstatic.com/charts/loader.js
The client script should look like this:

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

Note that Google uses non-standard Javascript, where it is required that methods be declared before they are used, so the setOnLoadCallback must take place after the declaration of drawChart. Also note the use of widget.getElement() to get a DOM object from an App Maker widget.

将HTML小部件添加到页面，为其提供所需的宽度和高度，并在其onAttach事件上，添加对showChart(widget);

Add an HTML widget to a page, give it the desired width and height, and on its onAttach event, add a call to showChart(widget);

这篇关于将脚本库应用于时间轴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

TimeLine