4

感谢观看和回答。我正在使用 Google Charts (TimeLine) 来显示数据库中的信息。但谷歌图表参考仅提供图表的固定高度。而我想根据从数据中获得的行数来更改图表高度。所以我做了代码：

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

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

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

有解决办法吗？谢谢你。

4

4 回答 4

13

不要弄乱图表的内部工作，而是根据 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
于 2013-09-05T18:23:16.537 回答
5

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

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

    var options = {
        height: chartHeight
    }

getNumberOfRows() 的 + 1 用于 X 轴文本。

于 2013-12-12T20:14:42.797 回答
1

据我所知：

  • 每个条的高度为 30 像素
  • 每组 10px 内边距。
  • 系列为 60 像素。

所以对于一个 9 栏组 = (30 * 9) + 10 = 280px 图表高度 = 280px + 60px

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

谷歌通过以下方式做到这一点：

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
于 2016-07-06T09:02:20.120 回答
1 
$.ajax({
  ...
  success: function(jsonData){
    ...
    var options = {
      height: (jsonData.length * 40) + 80,
      timeline: { colorByRowLabel: true }
    };

    chart.draw(dataTable, options);
 }
});
于 2015-12-01T17:38:31.623 回答