简体   繁体   English

Google Table图表样式

[英]Google Table Chart Styling

It seems like the styling on google table chart not working very well. 看起来Google表格图表上的样式效果不佳。 Even on their own examples on the webpage https://developers.google.com/chart/interactive/docs/examples ( Customized Table Example ) does not work? 即使在网页https://developers.google.com/chart/interactive/docs/examples自定义表格示例 )上自己的示例也不起作用? Like the golden border? 喜欢金色边框吗? I can´t see any? 我看不到吗?

I want to style my own google table chart and remove the border around the cells? 我想设置自己的Google表格样式并删除单元格周围的边框? Anyone how can get that to work I would be so happy. 任何人如何使它正常工作我都会很高兴。 My code look like this. 我的代码如下所示。

CSS: CSS:

  .remove-cell-border{
        border: none;
    }

chartService.js chartService.js

var drawTableChart = function (data, type) {

    var cssClassNames = {
        'headerRow': "header-grey-font",
        'tableRow': "remove-cell-border",
        'headerCell': "remove-cell-border",
        'tableCell': "remove-cell-border",
    };

    var chartObject = {
        "type": type,
        "display": false,
        "data": data,
        "options": { 
            "allowHtml": true,
            "isStacked": "true",
            "fill": 20,
            "displayExactValues": false,
            "cssClassNames": cssClassNames
            },
        "formatters": {}
    };
    return chartObject;
};

return {
    drawTableChart: drawTableChart
};

The thing was that some other CSS was overriding my border-style. 事实是,其他一些CSS取代了我的边框样式。 So now it is working when I changed my CSS to !important . 所以现在当我将CSS更改为!important时,它可以正常工作。

.remove-cell-border{
    border: none !important;
}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM