谷歌条形图全宽答案

【问题标题】：Google Bar chart take full width谷歌条形图全宽
【发布时间】：2017-06-28 01:16:11
【问题描述】：

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

我现在的选择是：

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
    };

【问题讨论】：

可以是70% 的宽高吗？
哦，也许是这样。我不再在电脑上，但我明天会检查。非常感谢。

标签： javascript charts google-api google-visualization

【解决方案1】：

这里有几个选项...

使用选项 --> theme: 'maximized'

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

请参阅以下工作 sn-p...

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>

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

这里，房间在边缘（top、right、bottom、left）
对于各种标签...

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

请参阅以下工作 sn-p...

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>

【讨论】：