Google条形图占全宽

Question

我有一个谷歌图表，我需要占据图表区域的整个宽度，我该怎么办？正如你在上面的图片中看到的那样，既不是全宽也不是高。

我现在的选择是：

var options = {
        title: 'Baterry Packs Voltages',
        legend: { position: 'none' },
        hAxis: { title: 'Pack', viewWindow: { min: 0, max: 13 }, gridlines: { count: 0 }, ticks: [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ] },
        vAxis: { title: 'Pack Voltage [V]', viewWindow: { min: 0, max: 5 }, gridlines: { count: 10 }, ticks: [0, 1, 2, 3, 4, 5] },
        chartArea: { left: '8%', top: '8%', width: "70%", height: "70%" },
        height: 450,
        width: 700
    };

Answer 1

这里有几个选项...

1）

使用选项 - ＆gt; theme: 'maximized'

这会将图表区域扩展到容器的边缘 并将所有标签（包括标题）放在图表区域内

请参阅以下工作代码段...

google.charts.load('current', {
  callback: function () {
    drawChart();
    $(window).on('resize', drawChart);
  },
  packages:['corechart']
});

function drawChart() {
  var formatDate = new google.visualization.DateFormat({
    pattern: 'dd/MM'
  });

  var oneDay = (1000 * 60 * 60 * 24);
  var startDate = new Date(2017, 0, 16);
  var endDate = new Date();
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn('date', 'Date');
  dataTable.addColumn('number', 'Value');
  for (var i = startDate.getTime(); i < endDate.getTime(); i = i + oneDay) {
    dataTable.addRow([
      new Date(i),
      (2 * ((i - startDate.getTime()) / oneDay) + 8)
    ]);
  }

  var chartColumn = new google.visualization.ChartWrapper({
    chartType: 'LineChart',
    containerId: 'chart-line',
    dataTable: dataTable,
    options: {
      theme: 'maximized'
    }
  });
  chartColumn.draw();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart-line"></div>

2）

手动调整图表和图表区域的大小......

此处，房间留在边缘（top，right，bottom，left） 对于各种标签...

  chartArea: {
    top: 12,
    right: 12,
    bottom: 24,
    left: 24,
    height: '100%',
    width: '100%'
  }

请参阅以下工作代码段...

google.charts.load('current', {
  callback: function () {
    drawChart();
    $(window).on('resize', drawChart);
  },
  packages:['corechart']
});

function drawChart() {
  var formatDate = new google.visualization.DateFormat({
    pattern: 'dd/MM'
  });

  var oneDay = (1000 * 60 * 60 * 24);
  var startDate = new Date(2017, 0, 16);
  var endDate = new Date();
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn('date', 'Date');
  dataTable.addColumn('number', 'Value');
  for (var i = startDate.getTime(); i < endDate.getTime(); i = i + oneDay) {
    dataTable.addRow([
      new Date(i),
      (2 * ((i - startDate.getTime()) / oneDay) + 8)
    ]);
  }

  var chartColumn = new google.visualization.ChartWrapper({
    chartType: 'LineChart',
    containerId: 'chart-line',
    dataTable: dataTable,
    options: {
      chartArea: {
        top: 12,
        right: 12,
        bottom: 24,
        left: 24,
        height: '100%',
        width: '100%'
      }
    }
  });
  chartColumn.draw();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart-line"></div>