Question

这个代码完美无缺，除了一个小的格式问题我找不到一个简单的方法来修复。谷歌电子表格作为数据源在列中有换行符。但是，在表中，它看起来好像只是用空格格式化。我已经尝试在数据表中使用allowHthml选项（在将换行转换为
标签之后），但这会删除所有格式并使表看起来很糟糕。我也尝试过“Formatter”类，但这似乎更多地是为了连接字段而且也遵循相同的no-html规则。

任何人都知道我在这里缺少的东西可以让换行符在表中正确显示而不会破坏格式。我想简单地将新行添加到字段中，以便它们正确显示。

您可以将此权限复制/粘贴到jsLint中，它会运行并显示我正在谈论的内容。

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


function drawVisualization() {

  var opts = {dataType:'jsonp'};

  var query = new google.visualization.Query('https://docs.google.com/spreadsheet/pub?key=0AiEVKSSB6IaqdDZBTGJqV0lLZEV3YS0teXZkOWR4M3c&output=html', opts);

  query.setQuery("select * ");

  // Send the query with a callback function.
  query.send(handleQueryResponse);
}

function handleQueryResponse(response) {  
  // Create and populate the data table.
  var data = response.getDataTable();

    // Create and draw the visualization.
  visualization = new google.visualization.Table(document.getElementById('table'));
  visualization.draw(data, null);
}
google.setOnLoadCallback(drawVisualization);

Answer 1

这可能是一个hacky解决方案，但如何使用JavaScript方法replace all line breaks in a string with <br /> tags？我还添加了少量的CSS，以便新表具有底部垂直对齐（就像原始的电子表格一样）。

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

function drawVisualization() {
  var opts = {dataType:'jsonp'};
  var query = new google.visualization.Query('https://docs.google.com/spreadsheet/pub?key=0AiEVKSSB6IaqdDZBTGJqV0lLZEV3YS0teXZkOWR4M3c&output=html', opts);

  query.setQuery("select * ");

  // Send the query with a callback function.
  query.send(handleQueryResponse);
}

function handleQueryResponse(response) {
  // Create and populate the data table.
  var data = new google.visualization.DataTable(
        response.getDataTable().toJSON().split("\\n").join("<br />"));

  var opts = {'allowHtml': true};

  // Create and draw the visualization.
  visualization = new google.visualization.Table(document.getElementById('table'));
  visualization.draw(data, opts);
}

google.setOnLoadCallback(drawVisualization);

</script>

<style type="text/css">
.google-visualization-table-td{
    vertical-align: bottom;
}
</style>
<div id="table"></div>

Google电子表格中的换行符未在Google图表表格中输出

1 个答案: