如何为每列设置特定宽度

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>