【问题标题】:How to change the height of a Gantt chart in amCharts?如何在 amCharts 中更改甘特图的高度?
【发布时间】:2025-12-09 20:10:01
【问题描述】:

我们有一个甘特图,其中包含太多标签并且它们重叠。我可以通过图表的属性更改图表或父容器的高度吗?基本上,我们有一个甘特图,其中有一列包含 80 多个项目,但每隔一列大约有 20 个。这会导致附加到较小列的标签重叠,就像它们被挤压在一起一样。

很遗憾,我不能包含代码,因为它不是我的,而是我公司的。

我已经尝试将样式标签添加到带有图表的 div 以增加高度,但没有任何变化。

【问题讨论】:

    标签: php height amcharts gantt-chart


    【解决方案1】:

    您好,您可以使用样式标签来做到这一点:

    #chartdiv {
      width: 100%;
      height: auto;
    }
    

    您还可以使用boostrap之类的框架来管理div的大小,amchart还提供了一个如何调整char单元格大小的示例,代码如下:

    // Set cell size in pixels
    var cellSize = 30;
    chart.events.on("datavalidated", function(ev) {
    
      // Get objects of interest
      var chart = ev.target;
      var categoryAxis = chart.yAxes.getIndex(0);
    
      // Calculate how we need to adjust chart height
      var adjustHeight = chart.data.length * cellSize - categoryAxis.pixelHeight;
    
      // get current chart height
      var targetHeight = chart.pixelHeight + adjustHeight;
    
      // Set it on chart's container
      chart.svgContainer.htmlElement.style.height = targetHeight + "px";
    });
    

    如果您有任何问题,最后这里是网站:https://www.amcharts.com/docs/v4/tutorials/auto-adjusting-chart-height-based-on-a-number-of-data-items/

    【讨论】:

      【解决方案2】:

      我正在使用以下技术来调整甘特图的高度

      <div id="chartdiv" style="width:100%; min-height:300px;"></div>
      

      这是动态调整甘特图高度的简单技巧

      var length = result.length; // number of category getting from backend via ajax call
       $("#chartdiv").height(length*25);
                      
                 
      

      【讨论】: