App Maker中的项目时间表

Question

我的用户希望能够以项目时间轴格式查看跨日期（X轴）的各个房间（Y轴）的状态。

一些例子：

我希望可能会使用条形图小部件，但看起来这需要字段为数字（日期不会起作用）。

像我说的那样，我意识到这是一个很长的镜头，但我想我会尝试。

Answer 1

我正在使用此库https://docs.dhtmlx.com/scheduler/在App Maker项目中实现调度程序。但它可以切换到条形时间线小部件。以下是一个示例：https://docs.dhtmlx.com/scheduler/samples/06_timeline/02_lines.html

要将小部件添加到项目中，请打开项目设置，找到外部资源并添加到 JavaScript网址：

https://docs.dhtmlx.com/scheduler/codebase/ext/dhtmlxscheduler_timeline.js
//cdn.dhtmlx.com/scheduler/edge/dhtmlxscheduler.js

您还需要将库样式添加到 CSS网址：

//cdn.dhtmlx.com/scheduler/edge/dhtmlxscheduler.css

现在我们可以在项目中初始化这个小部件。将Html小部件添加到您的页面。例如，它有Projects数据源。检查allowUnsafeHtml属性并将html代码放入其中：

<div id="schedulerContainer" tabindex="0" aria-label="events calendar" class="dhx_cal_container" style="width:960px; height:555px;">
    <div class="dhx_cal_navline">
        <div class="dhx_cal_prev_button">&nbsp;</div>
        <div class="dhx_cal_next_button">&nbsp;</div>
        <div class="dhx_cal_today_button"></div>
        <div class="dhx_cal_date"></div>
        <div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>
        <div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
        <div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
    </div>
    
    <div class="dhx_cal_header">Timeline is not loaded</div>
    <div class="dhx_cal_data"></div>
</div>

将小部件初始化添加到Html小部件的onDataLoad事件：

initTimeline(widget);

现在让我们创建客户端脚本并实现函数 initTimeline ：

function initTimeline(widget) {
  const datasource = widget.datasource;

  // shceduler is a global variable
  scheduler.locale.labels.timeline_tab = "Timeline";
  scheduler.locale.labels.section_custom = "Section";
  scheduler.config.details_on_create = true;
  scheduler.config.details_on_dblclick = true;
  scheduler.config.xml_date = "%Y-%m-%d %H:%i";

  //===============
  //Configuration
  //===============

  // sections can fetched from datasource items
  var sections = [{
      key: 1,
      label: "James Smith"
    },
    {
      key: 2,
      label: "John Williams"
    },
    {
      key: 3,
      label: "David Miller"
    },
    {
      key: 4,
      label: "Linda Brown"
    }
  ];

  scheduler.createTimelineView({
    name: "timeline",
    x_unit: "minute",
    x_date: "%H:%i",
    x_step: 30,
    x_size: 24,
    x_start: 16,
    x_length: 48,
    y_unit: sections,
    y_property: "section_id",
    render: "bar"
  });

  //===============
  //Data loading
  //===============
  scheduler.config.lightbox.sections = [{
      name: "description",
      height: 130,
      map_to: "text",
      type: "textarea",
      focus: true
    },
    {
      name: "custom",
      height: 23,
      type: "select",
      options: sections,
      map_to: "section_id"
    },
    {
      name: "time",
      height: 72,
      type: "time",
      map_to: "auto"
    }
  ];

  scheduler.init('schedulerContainer', new Date(2017, 5, 30), "timeline");

  /*
    this data also can be fetched from datasource and parsed 
    to proper format using code like this:
  
    const data = datasource.items.map((item) => {
      return {
        start_date: item.start_date,
        end_date: item.end_date,
        text: item.name,
        section_id: item.category_id
      };  
    });
    
  */

  scheduler.parse([{
      start_date: "2017-06-30 09:00",
      end_date: "2017-06-30 12:00",
      text: "Task A-12458",
      section_id: 1
    },
    {
      start_date: "2017-06-30 10:00",
      end_date: "2017-06-30 16:00",
      text: "Task A-89411",
      section_id: 1
    },
    {
      start_date: "2017-06-30 10:00",
      end_date: "2017-06-30 14:00",
      text: "Task A-64168",
      section_id: 1
    },
    {
      start_date: "2017-06-30 16:00",
      end_date: "2017-06-30 17:00",
      text: "Task A-46598",
      section_id: 1
    },

    {
      start_date: "2017-06-30 12:00",
      end_date: "2017-06-30 20:00",
      text: "Task B-48865",
      section_id: 2
    },
    {
      start_date: "2017-06-30 14:00",
      end_date: "2017-06-30 16:00",
      text: "Task B-44864",
      section_id: 2
    },
    {
      start_date: "2017-06-30 16:30",
      end_date: "2017-06-30 18:00",
      text: "Task B-46558",
      section_id: 2
    },
    {
      start_date: "2017-06-30 18:30",
      end_date: "2017-06-30 20:00",
      text: "Task B-45564",
      section_id: 2
    },

    {
      start_date: "2017-06-30 08:00",
      end_date: "2017-06-30 12:00",
      text: "Task C-32421",
      section_id: 3
    },
    {
      start_date: "2017-06-30 14:30",
      end_date: "2017-06-30 16:45",
      text: "Task C-14244",
      section_id: 3
    },

    {
      start_date: "2017-06-30 09:20",
      end_date: "2017-06-30 12:20",
      text: "Task D-52688",
      section_id: 4
    },
    {
      start_date: "2017-06-30 11:40",
      end_date: "2017-06-30 16:30",
      text: "Task D-46588",
      section_id: 4
    },
    {
      start_date: "2017-06-30 12:00",
      end_date: "2017-06-30 18:00",
      text: "Task D-12458",
      section_id: 4
    }
  ], "json");
}

此答案是如何添加此小部件的一般指南。但它可能包含错误，所以我建议你看看widget documentation以及

Answer 2

不幸的是，App Maker中没有本机时间线图表支持。我建议尝试找一个可以绘制时间轴并在App Maker应用程序中使用它的JS库。谷歌可视化库有一个我认为的时间表图表，默认情况下该库包含在App Maker应用程序中。