Question

<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
    google.load('visualization', '1', { packages: ['table'] });
</script>
<script type="text/javascript">
    var visualization;
    function drawVisualization() {

        var query = new google.visualization.Query(
        'https://docs.google.com/spreadsheets/d/18KqoG0VT8c5eaT6IdSzczRPXJX4-CPFfBeImv07n5NA/edit#gid=1324681333');

        query.setQuery('SELECT B, C, D, E, F, H, I, G ');
        query.send(handleQueryResponse);
    }

    function handleQueryResponse(response) {
        if (response.isError()) {
            alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
            return;
        }

        var data = response.getDataTable();

        visualization = new google.visualization.Table(document.getElementById('table'));
        visualization.draw(data, { legend: 'bottom' });
    }
    google.setOnLoadCallback(drawVisualization);
</script>
<br />
<div id="table">
</div>

我的英语不好，我不是程序员。我只想以不同的方式确定B，C，D，E，F，H，I，G列的大小。谢谢。我希望它不违反网站规则。

Answer 1

在引用为重复的问题中接受的答案似乎不起作用即使应用于答案中的每一行与第一行。

无论如何，您可以使用DataView在每列中插入html div 包含width维度的css，并为每个要调整的列指定一个类名。

还建议使用loader.js加载谷歌图表与旧库jsapi。

参见以下示例...

google.charts.load('current', {
  callback: drawVisualization,
  packages: ['table']
});

var visualization;
function drawVisualization() {
  var query = new google.visualization.Query(
    'https://docs.google.com/spreadsheets/d/18KqoG0VT8c5eaT6IdSzczRPXJX4-CPFfBeImv07n5NA/edit#gid=1324681333'
  );

  query.setQuery('SELECT B, C, D, E, F, H, I, G');
  query.send(handleQueryResponse);
}

function handleQueryResponse(response) {
  if (response.isError()) {
    alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
    return;
  }

  var data = response.getDataTable();

  // answer from question referenced in comments uses setProperty
  // which doesnt appear to work for "width"
  // even when applied to every row -- not shown here
  // setProperty for style on first cell in table
  data.setProperty(0, 0, 'style', 'background-color: red; width: 500px;');

  // use DataView to customize columns
  // first, load view column indexes
  var viewColumns = [];
  for (var i = 0; i < data.getNumberOfColumns(); i++) {
    viewColumns.push(i);
  }

  // next, setup columns to be adjusted
  // column index 1 = second column
  viewColumns[1] = {
    calc: function (dataTable, row) {
      var columnValue = dataTable.getValue(row, 1) || '';
      // class name should match definition in CSS
      return '<div class="column1">' + columnValue + '<div>';
    },
    type: 'string',
    label: data.getColumnLabel(1)
  };

  // column index 3 = fourth column
  viewColumns[3] = {
    calc: function (dataTable, row) {
      var columnValue = dataTable.getValue(row, 3) || '';
      return '<div class="column3">' + columnValue + '<div>';
    },
    type: 'string',
    label: data.getColumnLabel(3)
  };

  // next, create DataView and setColumns
  var view = new google.visualization.DataView(data);
  view.setColumns(viewColumns);

  // finally, draw chart using view instead of data
  visualization = new google.visualization.Table(document.getElementById('table'));
  visualization.draw(view, {
    allowHtml: true
  });
}

/* css column definitions */
.column1 {
  width: 150px;
}

.column3 {
  width: 300px;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="table"></div>

如何为每列设置特定宽度

1 个答案: