Google电子表格中的Newline不会在Google图表中输出 [英] Newline in Google spreadsheet not outputting in Google chart table

问题描述

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

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

您可以将此权限复制/粘贴到jsLint中，它会运行并向您显示我是什么谈论。

 < script type =text / javascriptsrc =http://www.google.com/ JSAPI>< /脚本> 
< 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 *）; 
 
 //用回调函数发送查询。 
 query.send（handleQueryResponse）; 
} 
 
函数handleQueryResponse（响应）{
 //创建并填充数据表。 
 var data = response.getDataTable（）; 
 
 //创建并绘制可视化文件。 
 visualization = new google.visualization.Table（document.getElementById（'table'））; 
 visualization.draw（data，null）; 
} 
 google.setOnLoadCallback（drawVisualization）; 
  

<解决方案

这可能是一个拙劣的解决方案，但如何使用JavaScript方法用< br />替换字符串中的所有换行符标记？我还添加了一小部分CSS，以便新表具有底部垂直对齐方式（就像原始电子表格一样）。

  < script type =text / javascriptsrc =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 *）; 
 
 //用回调函数发送查询。 
 query.send（handleQueryResponse）; 
} 
 
函数handleQueryResponse（响应）{
 //创建并填充数据表。 
 var data = new google.visualization.DataTable（
 response.getDataTable（）。toJSON（）。split（\\）。join（< br />） ）; 
 
 var opts = {'allowHtml'：true}; 
 
 //创建并绘制可视化文件。 
 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> 
  

This code works perfectly except for a small formatting issue I can't find an easy way to fix. The google spreadsheet as the datasource has newline in the columns. However, in the table it looks as if they are simply formatted by spaces. I've tried using the allowHthml option in the data table (after converting the newlines to
tags) but that then removes all formatting and makes the table look terrible. I've also tried the "Formatter" class but that seems more driven to concatenation of fields and also lives by the same no-html rule.

Anyone know of something i'm missing here that can get the newline to show properly in the table without breaking the formatting. I want to simply add the newlines into the fields so they display properly.

You can copy/paste this right into jsLint and it will run and show you what i'm talking about.

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

​

解决方案

This may be a bit of a hacky solution but how about using a JavaScript method to replace all line breaks in a string with <br /> tags? I also added a small amount of CSS so that the new table has bottom vertical alignment (like the original Spreadsheet would have).

<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电子表格中的Newline不会在Google图表中输出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！