IBM甘特图-看不到图表

Question

我使用的是IBM gantt chart的插件https://ibm.github.io/gantt-chart/packages/ibm-gantt-chart-docs/storybook/?path=/story/guides-introduction--getting-started。根据文档的示例，我已经使用了代码。

在标题中，我在呼叫

<script src="<?php echo base_url(); ?>assets/modules/jquery.min.js"></script>
<script src="<?php echo base_url(); ?>assets/modules/datatables.net/js/jquery.dataTables.js"></script>
    <link rel="stylesheet" href="<?php echo base_url(); ?>assets/modules/datatables.net-dt/css/jquery.dataTables.css" />

    <script src="<?php echo base_url(); ?>assets/modules/vis/dist/vis.min.js"></script>
    <link rel="stylesheet" href="<?php echo base_url(); ?>assets/modules/vis/dist/vis.min.css">

    <link rel="stylesheet" href="<?php echo base_url(); ?>assets/modules/ibm-gantt-chart/dist/ibm-gantt-chart-jquery.css">
    <script src="<?php echo base_url(); ?>assets/modules/ibm-gantt-chart/dist/ibm-gantt-chart-jquery.js"></script>

由于我在正文和脚本中使用的主题：

<div class="main-content">
    <section class="section">
        <div class="section-body">
            <div class="row mt-sm-4">
                <div class="col-12">
                    <div id="gantt"></div>
                </div>
            </div>
        </div>
    </section>
</div>

<script>
var data = [
        {
          id: 'NURSES+Anne',
          name: 'Anne',
          activities: [
            {
              id: 'SHIFTS+Emergency+Monday+2+8',
              name: 'Emergency',
              start: 1474880400000,
              end: 1474902000000,
            },
          ],
        },
        {
          id: 'NURSES+Bethanie',
          name: 'Bethanie',
          activities: [],
        },
        {
          id: 'NURSES+Betsy',
          name: 'Betsy',
          activities: [
            {
              id: 'SHIFTS+Emergency+Wednesday+12+18',
              name: 'Emergency',
              start: 1475089200000,
              end: 1475110800000,
            },
            {
              id: 'SHIFTS+Emergency+Saturday+12+20',
              name: 'Emergency',
              start: 1475348400000,
              end: 1475377200000,
            },
            {
              id: 'SHIFTS+Consultation+Friday+8+12',
              name: 'Consultation',
              start: 1475247600000,
              end: 1475262000000,
            },
          ],
        },
        {
          id: 'NURSES+Cathy',
          name: 'Cathy',
          activities: [
            {
              id: 'SHIFTS+Emergency+Sunday+20+2',
              name: 'Emergency',
              start: 1475463600000,
              end: 1475485200000,
            },
            {
              id: 'SHIFTS+Emergency+Saturday+12+20',
              name: 'Emergency',
              start: 1475348400000,
              end: 1475377200000,
            },
            {
              id: 'SHIFTS+Emergency+Monday+18+2',
              name: 'Emergency',
              start: 1474938000000,
              end: 1474966800000,
            },
          ],
        },
        {
          id: 'NURSES+Cindy',
          name: 'Cindy',
          activities: [
            {
              id: 'SHIFTS+Emergency+Saturday+20+2',
              name: 'Emergency',
              start: 1475377200000,
              end: 1475398800000,
            },
            {
              id: 'SHIFTS+Consultation+Friday+8+12',
              name: 'Consultation',
              start: 1475247600000,
              end: 1475262000000,
            },
            {
              id: 'SHIFTS+Consultation+Tuesday+8+12',
              name: 'Consultation',
              start: 1474988400000,
              end: 1475002800000,
            },
          ],
        },
      ];
      var config = {
        data: {
          // Configures how to fetch resources for the Gantt
          resources: {
            data: data, // resources are provided in an array. Instead, we could configure a request to the server.
            // Activities of the resources are provided along with the 'activities' property of resource objects.
            // Alternatively, they could be listed from the 'data.activities' configuration.
            activities: 'activities',
            name: 'name', // The name of the resource is provided with the name property of the resource object.
            id: 'id', // The id of the resource is provided with the id property of the resource object.
          },
          // Configures how to fetch activities for the Gantt
          // As activities are provided along with the resources, this section only describes how to create
          // activity Gantt properties from the activity model objects.
          activities: {
            start: 'start', // The start of the activity is provided with the start property of the model object
            end: 'end', // The end of the activity is provided with the end property of the model object
            name: 'name', // The name of the activity is provided with the name property of the model object
          },
        },
        // Configure a toolbar associated with the Gantt
        toolbar: [
          'title',
          'search',
          'separator',
          {
            type: 'button',
            text: 'Refresh',
            fontIcon: 'fa fa-refresh fa-lg',
            onclick: function(ctx) {
              ctx.gantt.draw();
            },
          },
          'fitToContent',
          'zoomIn',
          'zoomOut',
        ],
        title: 'Simple Gantt', // Title for the Gantt to be displayed in the toolbar
      };
      new Gantt('gantt' /* the id of the DOM element to contain the Gantt chart */, config);
    </script>

我在控制台上没有收到任何错误，我可以看到一些示例数据出现，但是图表的高度没有正确显示，我几乎看不到任何东西

​

​

即使是手动调整css，我也不能显示图表。在css中，我能看到的示例和我的图表之间唯一的区别是在dataTables_scrollBody高度上，在我的图表中呈现为0。否则，没有区别。

编辑:我已经从网站上删除了所有其他css文件，但我仍然得到相同的错误。所以这不是css不兼容。

Answer 1

我必须为主gantt div指定一个样式。

示例

    <div id="gantt" style='width: 100%; height:500px;'></div>