Google图表 - 如何在不增加图表大小的情况下减少绘图区域

Question

我在HTML中有一个DIV元素来显示Google趋势图。

<div style="height: 300px; width: 100%; background-color: powderblue" id="trendchart">

问题：

但我的水平轴的值太长，因此我将它们对齐以在45度倾斜。

hAxis: {title: 'Execution Date', direction:-1, slantedText:true, slantedTextAngle:45},

现在，由于h轴值较大，因此在图表中几乎看不到它们：

在我将div高度设为1400px并且几乎占据了我的所有页面之前，我无法使H轴值可见。

我的问题：

如何在不增加图表大小的情况下减少绘图区域？

Answer 1

你可以使用选项 - ＆gt; import Foundation class X { let value: Int init(value: Int) { self.value = value } convenience init(rounding float: Float) { self.init(value: Int(round(float))) } }
它具有...的属性 chartArea，top，bottom，＆amp; left

在这种情况下，将right设置为所需的像素数，
请参阅以下工作代码段...

＆＃13;

＆＃13;

chartArea.bottom

＆＃13;

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'x');
  data.addColumn('number', 'y0');
  data.addRows([
     ['Item 001', 200],
     ['Item 002', 220],
     ['Item 003', 240],
     ['Item 004', 260],
     ['Item 005', 280],
     ['Item 006', 300]
  ]);

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data, {
    chartArea: {
      bottom: 80
    },
    hAxis: {
      slantedText: true
    }
  });
});

＆＃13;

＆＃13;

＆＃13;