修改CSS并找到Google Charts表的ID [英] Modifying CSS and finding ID of a google charts table

问题描述

我有两个问题. 我正在尝试创建一个Google Charts表.

I have two questions. I am trying to create a google charts table.

A)我需要创建的实际表元素的ID，以便可以进行一些修改.那么，如何设置/获取表ID?

A) I need the ID of the actual table element being created so I can make some modifications. So, how can I set/get the table ID?

B)如何将自定义CSS类添加到表标签?我基本上想将来自material-design-lite的css添加到这些表中.

B) How can I add custom CSS class to the table tag? I basically want to add css from material-design-lite to these tables.

非常感谢您！

推荐答案

首先，您可以使用例如...

headerRow-为表标题行(元素)分配一个类名.

headerRow - Assigns a class name to the table header row ( element).

tableRow-为非标题行(元素)分配一个类名.

tableRow - Assigns a class name to the non-header rows ( elements).

...

如果这样做没有帮助，则在图表为ready后，您可以根据需要修改dom.

If that doesn't help, you can modify the dom as needed, once the chart is ready.

您必须指定一个容器id来绘制图表，通常是div.

You have to specify a container id to draw the chart originally, usually a div.

因此您不需要Google table的id进行修改.只需浏览使用JavaScript定义的容器的内容，即可找到所需的内容.

So you don't need the id of the google table to modify it. Just browse the contents of the container you defined using JavaScript to find what you need.

例如，在某些浏览器中滚动时，锁定第一列标题行存在一个已知问题.以下是我用来修复此问题的功能，我正在使用MicrosoftAjax.js至getBounds作弊.

For instance, there is a known problem with locking the first column heading row when scrolling in certain browsers. Following is the function I use to fix that, I'm cheating a little, using MicrosoftAjax.js to getBounds.

_googleChartFixScroll: function(sender, args) {
    var googleBounds;
    var googleDivs;
    var googleRows;

    googleDivs = this._containerChart.getElementsByTagName('DIV');

    if (googleDivs.length === 3) {
        googleRows = this._containerChart.getElementsByTagName('TR');
        if (googleRows.length > 0) {
            googleBounds = Sys.UI.DomElement.getBounds(googleRows[0]);
            googleDivs[2].style.height = googleBounds.height + 'px';
        }
    }
},

重点是，在您为图表定义的div内，如果您只知道如何探索dom，则可以操纵google图表.找到所需元素后，就可以应用所需的样式...

The point is, within the div you define for the chart, you can manipulte the google chart, if you just know how to explore the dom. Once you find the element you need, you can apply what ever style you want...

在我的示例中，每当表有太多行并且需要锁定列标题时，就会有三个div而不是两个.这样，我找到了表格的第一行并将其锁定.

In my example, whenever the table has too many rows and the column header needs to be locked, there are three div's instead of two. As such, I find the first table row and lock it.

希望这对您有帮助...

Hope this helps...

这篇关于修改CSS并找到Google Charts表的ID的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！