0

我想使用AnyChart来显示资源Gantt。一切都很好，但图表高度很小（只有 150 像素），我无法在浏览器中将其放大。

即使使用我的数据，这也适用于操场（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>

图表

有什么问题吗？

谢谢！

4

1 回答 1

0

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

如果容器设置为 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)将使图表底部因溢出而不可见。
于 2017-05-13T17:29:59.570 回答