Question

感谢您查看和回答。我正在使用Google Charts（TimeLine）来显示数据库中的信息。但Google图表参考仅提供图表的设置修复高度。而我想根据从数据中获得的行数来更改图表高度。所以我制作了代码：

    var graph = $('#chart_timeLine').children()[0].children[0].children[1];
    $(graph).css('height',graph.scrollHeight);
    $(graph).css('overflow-y','auto');

现在图表没有垂直滚动条，我很满意。但我发现显示时间线图表比例尺的比例尺缺失了。（它实际上隐藏在图表下方，而不是显示在图表的底部）。

然后我将scalebar的位置更改为绝对位置并将其设置为图表的底部。然后它很丑，因为它的高度为200px，而刻度位于200px的底部，在我的图表和刻度之间留下了一个巨大的空白。

有没有解决方法？谢谢。

Answer 1

不要弄乱图表的内部工作，而是根据DataTable中的数据行数设置高度：

// set a padding value to cover the height of title and axis values
var paddingHeight = 40;
// set the height to be covered by the rows
var rowHeight = data.getNumberOfRows() * 15;
// set the total chart height
var chartHeight = rowHeight + paddingHeight;

然后在时间轴的选项中，设置高度：

height: chartHeight

Answer 2

我尝试了答案，但它对我不起作用。我让它为我工作的方式是：

    // Calculate height
    var rowHeight = 41;
    var chartHeight = dataTable.getNumberOfRows() * rowHeight + 50;

    var options = {
        height: chartHeight
    }

getNumberOfRows（）的+ 1用于X轴文本。

Answer 3

$.ajax({
  ...
  success: function(jsonData){
    ...
    var options = {
      height: (jsonData.length * 40) + 80,
      timeline: { colorByRowLabel: true }
    };

    chart.draw(dataTable, options);
 }
});

Answer 4

据我所知：

每个栏的高度为30px
每组10px填充。
系列的60px。

因此对于9 bar组=（30 * 9）+ 10 = 280px 图表高度= 280px + 60px

如果您正在分组行，则需要确定您的日期范围是否与该组中的任何其他范围重叠。

Google通过以下方式执行此操作：

Getting the Group items IN START DATE ORDER
Creating an empty array of Group Display Rows

For each Group Item:
   For each Display Row
      If Item fits in Row...
         Add it to existing Display Row
   Next

   If No existing Display row found
      Add New Display Row
Next

谷歌图表：时间轴：具有比例尺位置的动态高度

4 个答案: