Newline in Google-Tabelle nicht in Google-Chart-Tabelle

Question

Dieser Code funktioniert perfekt, außer für ein kleines Formatierungsproblem kann ich keinen einfachen Weg finden, zu beheben. Die Google-Tabelle als Datenquelle enthält Zeilenumbrüche in den Spalten. In der Tabelle sieht es jedoch so aus, als wären sie einfach durch Leerzeichen formatiert. Ich habe versucht, die AllowHthml-Option in der Datentabelle (nach dem Konvertieren der Zeilenumbrüche in
Tags), aber das entfernt dann alle Formatierungen und macht die Tabelle schrecklich aussehen. Ich habe auch versucht, die "Formatter" -Klasse, aber das scheint mehr zur Verkettung von Feldern getrieben und lebt auch von der gleichen No-Html-Regel.

Wer weiß, etwas, das ich hier vermisse, dass die Newline ordnungsgemäß in der Tabelle angezeigt werden kann, ohne die Formatierung zu brechen. Ich möchte einfach die Zeilenumbrüche in die Felder einfügen, damit sie richtig angezeigt werden.

Sie können dieses Recht in jsLint kopieren und einfügen und es wird laufen und Ihnen zeigen, worüber ich spreche.

<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

Dies kann ein bisschen eine hacky Lösung sein, aber wie wäre es eine JavaScript-Methode replace all line breaks in a string with <br /> tags verwenden? Ich fügte auch eine kleine Menge von CSS hinzu, so dass die neue Tabelle vertikale Ausrichtung unten hat (wie das ursprüngliche Spreadsheet hätte).

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