自定义谷歌图表列过滤器

Question

我一直在试图弄清楚如何用自己的风格自定义列过滤器，但出于某种原因，谷歌决定将渲染的 HTML 放在 body-tag 的底部，换句话说：列过滤器的菜单附加到 DOM，位于 body-tag 底部的控件本身之外。他们到底为什么决定把它放在那里？这让我有点沮丧，因为这迫使我在我想要的每个新 CSS 规则之后放置很多!important;。

我也在Google Docs中读到了如何调用ui.cssClass，但这对我没有一点帮助。还有其他人设法解决这个问题吗？甚至可以为此创建自己的标记吗？

这里的例子，你可以看到我的观点。

我将把我的一些代码放在这里，这样你就可以清楚地了解这里发生的事情。

JavaScript：

var columnFilterOptions = {
    filterColumnLabel: 'colLabel',
    ui: {
        caption: "Compare",
        label: false,
        allowTyping: false,
        allowMultiple: true,
        allowNone: false,
        selectedValuesLayout: 'below'
    }
};

.HTML：

<div class="colFilter_div"></div>

CSS/LESS：

.charts-menu-button-disabled {
    background: @grayLighter !important;
    opacity: 0.5 !important;
}
.charts-menu-button-outer-box {
    width: 100%;
    border: 0 !important;
}
.charts-menu-button {
    background: @grayLighter !important;
    margin: 0 !important;
    margin-bottom: @smallGutter !important;
}
.charts-menu-button-open {
    background: @blueLight !important;
}
.charts-menu-button,
.charts-menu-button-inner-box {
    color: @grayDark !important;
    width: 100%;
    line-height: 55px;
    border: 0 !important;
    padding: 0 !important;
}
.charts-menu-button:before,
.charts-menu-button-inner-box:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height: 55px;
    overflow: hidden;
    background: @grayLight;
    text-align: center;
}
.charts-menu-button-open:focus:after {
    content: "";
    display: block;
    position: absolute;
    top: 17px;
    right: 27px;
    background: url(../../content/images/sprites.png);
    width: 7px;
    height: 19px;
    background-position: -31px -90px;
}
.charts-menu-button:after {
    content: "";
    display: block;
    position: absolute;
    top: 17px;
    right: 27px;
    background: url(../../content/images/sprites.png);
    width: 7px;
    height: 19px;
    background-position: -16px -110px;
}
.charts-menu-button-caption {
    .proxima-nova();
    padding-left: @smallGutter !important;
    font-size: 1.1em;
}
.charts-menu-button-dropdown {
    background: none !important;
}
.charts-menu,
.charts-menu-vertical {
    overflow: auto;
    width: auto !important;
    min-width: 11.19% !important;
    margin: 0;
    border: 0 !important;
    background: @grayLighter !important;
    border-top: 2px solid @green !important;
    padding-right: @smallGutter !important;
}
.charts-menuitem-content {
    width: 100%;
    color: @grayDark !important;
    .proxima-nova() !important;
    font-size: 16px !important;
    padding: 10px 0;
    display: block;
    border-top: 2px solid transparent;
}
.charts-menuitem-content:hover {
    color: @blue !important;
    border-top: 2px solid @blue;
}
.charts-menuitem-highlight {
    background: none !important;
    border: 0 !important;
    border-width: 0 !important;
    padding: 4px 0 4px 28px !important;
}
li.charts-container-horizontal {
    padding: 10px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: @grayLighter !important;
    .charts-link-button {
        .proxima-nova() !important;
        font-size: 1.1em !important;
        color: @grayDark !important;
    }
    .charts-control {
        .proxima-nova();
    }
}

Answer 1

你可以在

ControlWrapper选项中使用ui.cssClass，但你需要调用JQuery并像这样嵌入它：

$(".columnFilter_class .charts-menu-button-caption").css({"color":"red"});

这样做对我有用。