javascript - 带有 AnyChart 的资源甘特图无法更改图表高度

Question

我想使用AnyChart 来显示资源甘特图。一切正常，但图表高度很小(只有 150 像素)，我无法在浏览器中将其调大。

这适用于 playground ( https://playground.anychart.com/docs/7.13.1/samples/GANTT_Chart_01-plain )，即使是我的数据也是如此。

我将完全相同的代码复制到我的元素中，图表仅显示 150 像素的高度。

JavaScript

    var treeData = anychart.data.tree(data, anychart.enums.TreeFillingMethod.AS_TABLE);

    // chart type
    chart = anychart.ganttResource();
    //chart = anychart.fromJson(ganttdata);
    chart.height(800);

    // chart container
    chart.container("devschedule");

    // chart position
    chart.bounds(0, 0, "100%", "100%");

    // chart data
    chart.data(treeData);

    // data tree width
    chart.splitterPosition(170);

    var dataGrid = chart.dataGrid();

    // settings for first column
    dataGrid.column(0).width(30).title().text("#");

    // settings for the second column
    dataGrid.column(1).width(140).format(function(item) {
    return item.get("name");
    }).title().text("Person");
    // initiate drawing
    chart.draw();

HTML

<div class="col-sm-9 col-md-9" height="500px">
  <div id="devschedule">
  </div>
</div>

有什么问题吗？

谢谢!

Answer 1

首先请注意图表的容器可以设置为

• HTML 元素的 ID(或作为 HTML 元素本身)
• 任何图表阶段。使用示例在这里:https://docs.anychart.com/7.13.1/Dashboards/Stage-Based_Layout

如果容器设置为 ID ( chart.container("devschedule"); )，图表会创建自己的 stage在里面渲染。默认情况下，舞台采用其 div-container 的边界。图表以其阶段为界。

这是设置图表高度的第一种方法:只需以正确的 CSS 方式指定 div 的大小:

<div class="col-sm-9 col-md-9">
    <div id="devschedule" style="height: 500px; width: 600px">
    </div>
</div>

或

<div class="col-sm-9 col-md-9" style="height: 500px; width: 600px">
    <div id="devschedule">
    </div>
</div>

关于图表的高度，您应该注意的第二件事是图表的边界是 stage 中的边界。这意味着

1. 代码行 chart.bounds(0, 0, "100%", "100%");没用:正如我之前所说，图表默认采用阶段边界。
2. chart.height(800);与 chart.bounds(0, 0, "100%", 800); 完全相同.
3. chart.bounds(0, 0, "100%", "100%");完全覆盖 chart.height(800);代码行因为chart.bounds在 chart.height 之后设置.
4. 在大多数情况下 chart.bounds()方法用于仪表板目的，以在舞台上添加两个或多个图表并避免重叠。这意味着如果您的 DIV 容器的高度为 600px，则默认情况下舞台也采用 600px 高度，设置 chart.height(800)由于溢出会使图表底部不可见。