如何在Google Visualization API的表格中居中数字？ [英] How do I center numbers in a table from Google Visualization API?

问题描述

我目前正在尝试协助整合网站，以显示Google试算表的大量资料。在本文中，我想使用 Google可视化API 来格式化数据，所以我可以显示它的方式，我想。我现在发现这令人难以置信的沮丧。

我想做的是中心一列数字，但所有的数字将仍然正确对齐，当我中心他们使用css。

css应用如下： .center {text-align：center; } ，并且我按照Google所述应用css：

  var cssClassNames = {
'headerRow'：'header-row'，
'tableRow'：'table-row'，
'oddTableRow'：'odd-table-row'，
'selectedTableRow' select-table-row'，
'hoverTableRow'：'hover-table-row'，
'headerCell'：'header-cell center'，
'tableCell'：'table-cell '，
'rowNumberCell'：''}; 
 
 function loadGoogleDriveTable（elementID，documentKey，range，sheetID）{
 var query = new google.visualization.Query（'https://docs.google.com/spreadsheet/ccc?key ='+ documentKey +'& range ='+ range +'& usp = drive_web& gid ='+ sheetID +'＃'）; 
 query.send（function（response）{
 if（response.isError（））{
 alert（'Error in query：'+ response.getMessage（）+''+ response。 getDetailedMessage（））; 
 return; 
} 
 
 var options = {'allowHtml'：true，'cssClassNames'：cssClassNames}; 
 var data = response。 getDataTable（）; 
 var chart = new google.visualization.Table（document.getElementById（elementID））; 
 chart.draw（data，options）; 
}）; 
} 
  

表加载所有适当的数据，他们看起来。

解决方案

这是因为即使您的单元格显示与您的自定义类，作为一个数字单元格，它也给单元格一个 google-visualization-table-td-number 类，设置 text-align：右。要修复它，只需更改你的样式以ovewrite它： text-align：center！important;

I am currently trying to help put together a website to display a lot of data from Google Sheets. In this I figured I would use the Google Visualization API to format the data so that I could show it in the way I would like. I have now found this incredibly frustrating.

What I would like to do is center a column of numbers, however all of the numbers will still right align when I center them using css.

The css is being applied like so: .center { text-align: center; } and I am applying the css as described by Google:

var cssClassNames = {
'headerRow': 'header-row',
'tableRow': 'table-row',
'oddTableRow': 'odd-table-row',
'selectedTableRow': 'selected-table-row',
'hoverTableRow': 'hover-table-row',
'headerCell': 'header-cell center',
'tableCell': 'table-cell',
'rowNumberCell': ''};

function loadGoogleDriveTable(elementID, documentKey, range, sheetID) {
    var query = new google.visualization.Query('https://docs.google.com/spreadsheet/ccc?key=' + documentKey + '&range=' + range + '&usp=drive_web&gid=' + sheetID + '#');
    query.send(function(response) {
        if (response.isError()) {
            alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
            return;
        }

        var options = { 'allowHtml': true, 'cssClassNames': cssClassNames };
        var data = response.getDataTable();
        var chart = new google.visualization.Table(document.getElementById(elementID));
        chart.draw(data, options);
    });
}

The tables load with all of the appropriate data, but don't change how they look.

Any help on this would be wonderful.

解决方案

Well, this happens because even though your cell is displayed with your custom class, as its a number cell it also gives the cell a google-visualization-table-td-number class, which sets the text-align:right. To fix it, just change your style to ovewrite it: text-align: center !important;

这篇关于如何在Google Visualization API的表格中居中数字？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！