如何将背景色应用于相同仪表板中的Kibana表 [英] How to apply background colors to Kibana tables in the same dashboard (or not)
问题描述
在Kibana仪表板中实现彩色表格时，我遇到了一个挑战，并试图找出互联网上的最佳方法，但到目前为止还没有任何办法.因此，由于我不想重新发明轮子并从头开始创建，所以我想听听您关于此实现的最新状态.顺便说一句，我知道我们可以根据其值定义一个单元格颜色，但是它不能只是单元格颜色，它必须是所有表格行或至少一个完整行.
I have a challenge to implement colorized tables in a Kibana Dashboard and tried to find out the best approach in internet, but no glue up to now. So, since I wouldn't like to re-invent the wheels and create from scratch, I would like to hear from you an updated status for this implementation. By the way, I know that we can define a cell color based on its value, but it cannot be only the cell color, it must be all table lines or at least, one full line.
面临的挑战是在同一个仪表板上绘制两个简单的表，一个完全为红色，第二个均为绿色.这是一个表示例: 报告示例
The challenge is to draw two simple tables in the same dashboard, one completely RED and a second all GREEN. Here is one table example: Report example
您是否已经找到某种方法来定义表格的背景颜色到kibana仪表板，kibana可视化组件中，甚至通过HTML或CSS文件定制来进行部署级别定制?
Have you have figured out some way to define the background color to the tables into a kibana dashboard, a kibana visualisation component or even by deployment level customization by HTML or CSS files customization?
推荐答案
此处是解决此难题的方法之一.为了找出其他格式，我建议在Chrome中使用F12并调试一些CSS语句.
Here is one of the ways for solving this challenge. In order to figure out any additional formatting, I do suggest to use F12 in Chrome and debug some CSS statements.
- 要更改的CSS文件:
- /usr/share/kibana/optimize/bundles/light-theme.style.css
- 让我们考虑以下表格标题
- 表1标题:"TOP_RED_TABLE"
- 表2标题:"BOTTON_GREEN_TABLE"
-
在CSS文件的末尾添加以下几行(将根据您的定义在下面的表标题替换到仪表板中)
At the end of CSS file, add the following lines (replace the table titles below according with your definitions into the dashboard)
[数据标题="TOP_RED_TABLE"]，[数据测试-subj ="embeddablePanelHeading-TOP_RED_TABLE"] {
背景颜色:红色；
白颜色;
}
[data-title="TOP_RED_TABLE"],[data-test-subj="embeddablePanelHeading-TOP_RED_TABLE"] {
background-color:red;
color:white;
}
[data-title ="BOTTON_GREEN_TABLE"]，[data-test-subj ="embeddablePanelHeading-BOTTON_GREEN_TABLE"] {
背景颜色:绿色；
白颜色;
}
.table thead {
font-size:14px;
背景颜色:黑色；
白颜色;
}
[data-title="BOTTON_GREEN_TABLE"], [data-test-subj="embeddablePanelHeading-BOTTON_GREEN_TABLE"] {
background-color:green;
color:white;
}
.table thead {
font-size: 14px;
background-color:black;
color:white;
}
.embPanel__title:not(:empty){ font-size:16px; }
.embPanel__title:not(:empty) { font-size: 16px; }
祝您的kibana定制好运，请在此处发布任何其他建议.
Good luck with your kibana customizations and please, post here any additional suggestions.
Tks
马塞洛
这篇关于如何将背景色应用于相同仪表板中的Kibana表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
