Googleスプレッドシートの改行がGoogleのグラフ表に出力されない

Question

このコードは小さな書式の問題を除いて完全に機能します。簡単な修正方法は見つけられません。データソースとしてのGoogleスプレッドシートには、列に改行があります。しかし、表では、単純にスペースでフォーマットされているかのように見えます。私はデータテーブルのallowHthmlオプション（改行を
タグに変換した後）を使用しようとしましたが、その後すべての書式が削除され、テーブルがひどく見えます。私はまた、 "Formatter"クラスを試しましたが、これはフィールドの連結にさらに重きをおき、同じ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

これはハックソリューションの少しかもしれないが、どのようにreplace all line breaks in a string with <br /> tagsにJavaScriptメソッドを使用してはどうですか？私はまた、新しいテーブルが（元のスプレッドシートのような）垂直方向の一番下に位置するように、少量の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>