Wie man eine spezifische Breite für jede Spalte einstellt

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> 

Mein Englisch ist nicht gut und ich bin kein Programmierer. Ich möchte nur die Spalten B, C, D, E, F, H, I, G unterschiedlich groß machen. Danke. Ich hoffe, es ist nicht gegen die Regeln der Website.

Answer 1

Die in der als Duplikat referenzierte Frage angenommene Antwort scheint nicht zu funktionieren.
Auch wenn auf jede Zeile im Vergleich zur ersten Zeile wie in der Antwort angewendet.

Unabhängig davon können Sie eine DataView verwenden, um eine HTML div in jede Spalte einzufügen.
Fügen Sie css für die Dimensionen width ein und weisen Sie jeder zu ändernden Spalte einen Klassennamen zu.

Verwenden Sie auch loader.js, um Google-Diagramme im Vergleich zur älteren Bibliothek jsapi zu laden.

Siehe Beispiel folgende ...

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>