Самый простой способ получить количество строк для каждой группы - это вызвать .size()
, который возвращает Series
:
df.groupby(['col1','col2']).size()
Обычно вы хотите в качестве DataFrame
(вместо Series
), чтобы вы могли:
df.groupby(['col1', 'col2']).size().reset_index(name='counts')
Если вы хотите узнать, как вычислить количество строк и другие статистические данные для каждой группы, продолжайте читать ниже ,
Рассмотрим следующий пример dataframe:
In [2]: df
Out[2]:
col1 col2 col3 col4 col5 col6
0 A B 0.20 -0.61 -0.49 1.49
1 A B -1.53 -1.01 -0.39 1.82
2 A B -0.44 0.27 0.72 0.11
3 A B 0.28 -1.32 0.38 0.18
4 C D 0.12 0.59 0.81 0.66
5 C D -0.13 -1.65 -1.64 0.50
6 C D -1.42 -0.11 -0.18 -0.44
7 E F -0.00 1.42 -0.26 1.17
8 E F 0.91 -0.47 1.35 -0.34
9 G H 1.48 -0.63 -1.14 0.17
Сначала давайте использовать .size()
, чтобы получить количество строк:
In [3]: df.groupby(['col1', 'col2']).size()
Out[3]:
col1 col2
A B 4
C D 3
E F 2
G H 1
dtype: int64
Затем давайте использовать .size().reset_index(name='counts')
, чтобы получить количество строк:
In [4]: df.groupby(['col1', 'col2']).size().reset_index(name='counts')
Out[4]:
col1 col2 counts
0 A B 4
1 C D 3
2 E F 2
3 G H 1
Когда вы хотите рассчитать статистику по сгруппированным данным, это обычно выглядит так:
In [5]: (df
...: .groupby(['col1', 'col2'])
...: .agg({
...: 'col3': ['mean', 'count'],
...: 'col4': ['median', 'min', 'count']
...: }))
Out[5]:
col4 col3
median min count mean count
col1 col2
A B -0.810 -1.32 4 -0.372500 4
C D -0.110 -1.65 3 -0.476667 3
E F 0.475 -0.47 2 0.455000 2
G H -0.630 -0.63 1 1.480000 1
. Вышеприведенный результат немного раздражает, поскольку он связан с вложенными метками столбцов, а также потому, что подсчет строк находится на на каждую колонку.
Чтобы получить больший контроль над выходом, я обычно разбиваю статистику на отдельные агрегации, которые затем объединяю с помощью join
. Это выглядит так:
In [6]: gb = df.groupby(['col1', 'col2'])
...: counts = gb.size().to_frame(name='counts')
...: (counts
...: .join(gb.agg({'col3': 'mean'}).rename(columns={'col3': 'col3_mean'}))
...: .join(gb.agg({'col4': 'median'}).rename(columns={'col4': 'col4_median'}))
...: .join(gb.agg({'col4': 'min'}).rename(columns={'col4': 'col4_min'}))
...: .reset_index()
...: )
...:
Out[6]:
col1 col2 counts col3_mean col4_median col4_min
0 A B 4 -0.372500 -0.810 -1.32
1 C D 3 -0.476667 -0.110 -1.65
2 E F 2 0.455000 0.475 -0.47
3 G H 1 1.480000 -0.630 -0.63
Код, используемый для генерации тестовых данных, показан ниже:
In [1]: import numpy as np
...: import pandas as pd
...:
...: keys = np.array([
...: ['A', 'B'],
...: ['A', 'B'],
...: ['A', 'B'],
...: ['A', 'B'],
...: ['C', 'D'],
...: ['C', 'D'],
...: ['C', 'D'],
...: ['E', 'F'],
...: ['E', 'F'],
...: ['G', 'H']
...: ])
...:
...: df = pd.DataFrame(
...: np.hstack([keys,np.random.randn(10,4).round(2)]),
...: columns = ['col1', 'col2', 'col3', 'col4', 'col5', 'col6']
...: )
...:
...: df[['col3', 'col4', 'col5', 'col6']] = \
...: df[['col3', 'col4', 'col5', 'col6']].astype(float)
...:
Отказ от ответственности:
Если некоторые из столбцов, которые вы агрегируете, имеют нулевые значения, вы действительно хотите смотреть на подсчеты строк группы как независимую агрегацию для каждого столбца. В противном случае вы можете ввести в заблуждение относительно того, сколько записей фактически используется для вычисления таких вещей, как среднее, потому что панды будут отбрасывать записи NaN
в среднем вычислении, не сообщая вам об этом.
Использовать полупрозрачное изображение PNG или использовать CSS3:
background-color:rgba(255,0,0,0.5);
Вот статья css3.info, Opacity, RGBA и компромисс (2007-06-03).
Вот как я это делаю (это может быть не оптимально, но оно работает):
Создайте div
, который вы хотите быть полупрозрачным. Дайте ему класс / id. Оставьте его ПУСТОЙ и закройте его. Дайте ему заданную высоту и ширину (скажем, 300 пикселей на 300 пикселей). Дайте ему непрозрачность 0,5 или все, что вам нравится, и цвет фона.
Затем, НЕПОСРЕДСТВЕННО НИЖЕ, что div, создайте еще один div с другим классом / id. Создайте абзац внутри него, где вы разместите свой текст. Дайте div
позицию: относительный и верхний: -295px
(это НЕГАТИВНО 295 пикселей). Дайте ему z-индекс 2 для хорошей меры и убедитесь, что его непрозрачность равна 1. Создайте свой абзац, как вам нравится, но убедитесь, что размеры меньше, чем размеры первого div
, поэтому он не переполняется.
Вот и все. Вот код:
.trans {
opacity: 0.5;
height: 300px;
width: 300px;
background-color: orange;
}
.trans2 {
opacity: 1;
position: relative;
top: -295px;
}
.trans2 p {
width: 295px;
color: black;
font-weight: bold;
}
<body>
<div class="trans">
</div>
<div class="trans2">
<p>
text text text
</p>
</div>
</body>
Это работает в Safari 2.x, я не знаю об Internet & nbsp; Explorer.
В Firefox 3 и Safari 3 вы можете использовать RGBA, например . Георг Шёлли упомянул .
. Известный трюк заключается в том, что вы можете использовать его в Internet & nbsp; Explorer, используя также градиентный фильтр.
background-color: rgba(0, 255, 0, 0.5);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#7F00FF00', EndColorStr='#7F00FF00');
Первый шестнадцатеричный номер определяет альфа-значение цвета.
Полное решение всех браузеров:
.alpha60 {
/* Fallback for web browsers that doesn't support RGBa */
background: rgb(0, 0, 0) transparent;
/* RGBa with 0.6 opacity */
background: rgba(0, 0, 0, 0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}
Это из прозрачности фона CSS без влияния на дочерние элементы, через RGBa и фильтры .
Это когда используя следующий код:
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
<title>An XHTML 1.0 Strict standard template</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type="text/css" media="all">
.transparent-background-with-text-and-images-on-top {
background: rgb(0, 0, 0) transparent; /* Fallback for web browsers that doesn't support RGBa */
background: rgba(0, 0, 0, 0.6); /* RGBa with 0.6 opacity */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000); /* For IE 5.5 - 7*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"; /* For IE 8*/
}
</style>
</head>
<body>
<div class="transparent-background-with-text-and-images-on-top">
<p>Here some content (text AND images) "on top of the transparent background"</p>
<img src="http://i.imgur.com/LnnghmF.gif">
</div>
</body>
</html>
[/g4] [/g5] [/g6] [/g7]
Вы можете использовать RGBA (red, green, blue, alpha)
в CSS, что-то вроде этого:
. Просто сделайте что-нибудь подобное в своем случае:
p {
position: absolute;
background-color: rgba(0, 255, 0, 0.6);
}
span {
color: white;
}
Обычно я использую этот класс для своей работы. Его очень хорошо.
.transparent {
filter: alpha(opacity=50); /* internet explorer */
-khtml-opacity: 0.5; /* khtml, old safari */
-moz-opacity: 0.5; /* mozilla, netscape */
opacity: 0.5; /* fx, safari, opera */
}
Непрозрачность фона, но не текст имеет некоторые идеи. Либо используйте полупрозрачное изображение, либо наложите дополнительный элемент.
фонового цвета: RGBA (255,0,0,0.5); как упомянуто выше, лучший ответ просто поставлен. Говорить, что использование CSS3, даже в 2013 году, не просто потому, что уровень поддержки различных браузеров меняется с каждой итерацией.
Хотя background-color
поддерживается всеми основными браузерами (не новостями для CSS3) [1], альфа-прозрачность может быть сложной, особенно с Internet Explorer до версии 9 и с цветом границы на Safari до версии 5.1. [2]
Использование чего-то вроде Compass или SASS может реально помочь в создании и совместимости с кросс-платформой.
[ 1] W3Schools: CSS background-color Свойство
[2] Блог пользователя Norman: список поддержки браузера CSS3 (октябрь 2012 г.)
Самый простой способ - использовать полупрозрачный фоновый PNG-образ.
Вы можете использовать JavaScript, чтобы он работал в Internet Explorer 6
, если вам нужно.
Я использую метод, описанный в Прозрачные PNG в Internet Explorer 6 .
Кроме этого,
вы можете подделать его с помощью two side-by-side sibling elements
- сделать один полупрозрачный, затем absolutely position the other over the top
?
Есть более легкое решение для наложения над изображением на один и тот же div. Это неправильное использование этого инструмента. Но работает как прелесть, чтобы сделать этот оверлей с помощью CSS.
Используйте тень вставки следующим образом:
box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.9);
Вот и все:)
<div align="center" style="width:100%;height:100%;background:white;opacity:0.5;position:absolute;z-index:1001">
<img id="search_img" style="margin-top:20%;" src="../resources/images/loading_small.gif">
</div>
Чтобы сделать фон элемента полупрозрачным, но содержание (текст и изображения) элемента непрозрачно. Вам нужно написать код css для этого изображения, и вам нужно добавить один атрибут с непрозрачностью с минимальным значением. например,
.image{
position: relative;
background-color: cyan;
opacity: 0.7;
}
// меньшее значение будет больше прозрачности, иначе значение будет прозрачным.
Вы можете сделать с
blockquote>rgba color code
, используя css, как этот пример, приведенный ниже.
.imgbox img{ height:100px; width:200px; position:relative; } .overlay{ background:rgba(74, 19, 61, 0.4); color:#fff; text-shadow:0px 2px 5px #000079; height:100px; width:300px; position:absolute; top:10%; left:25%; padding:25px; }
<div class"imgbox"> <img src="http://www.bhmpics.com/wallpapers/little_pony_art-800x480.jpg"> <div class="overlay"> <p>This is Simple Text.</p> </div> </div>
Это лучшее решение, которое я мог бы придумать, НЕ используя CSS 3. И он отлично работает на Firefox, Chrome и Internet Explorer, насколько я могу видеть.
Поместите контейнер DIV и два дочерние DIV на одном уровне, один для контента, один для фона. И используя CSS, автоматически задайте размер фона, чтобы он соответствовал содержимому, и поместил фон в обратную сторону, используя z-index.
.container {
position: relative;
}
.content {
position: relative;
color: White;
z-index: 5;
}
.background {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: Black;
z-index: 1;
/* These three lines are for transparency in all browsers. */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
opacity: .5;
}
<div class="container">
<div class="content">
Here is the content.
<br />Background should grow to fit.
</div>
<div class="background"></div>
</div>
Этот метод позволяет вам иметь изображение в фоновом режиме, а не только сплошной цвет, и его можно использовать для обеспечения прозрачности других атрибутов, таких как границы. Нет прозрачных изображений PNG.
Используйте :before
(или :after
) в CSS и дайте им значение непрозрачности, чтобы оставить элемент в его первоначальной непрозрачности. Таким образом, вы можете использовать: прежде, чем сделать faux-элемент и предоставить ему прозрачный фон (или границы), который вы хотите, и переместить его за контент, который вы хотите сохранить непрозрачным с помощью z-index
.
Пример ( скрипт ) (обратите внимание, что DIV
с классом dad
просто для того, чтобы обеспечить некоторый контекст и контрастировать с цветами, этот дополнительный элемент на самом деле не нужен , а красный прямоугольник перемещается немного вниз и вправо, чтобы оставить видимый фон за элементом fancyBg
):
<div class="dad">
<div class="fancyBg">
Test text that should have solid text color lets see if we can manage it without extra elements
</div>
</div>
с этим CSS:
.dad {
background: lime; border: 1px double black; margin: 1ex 2ex;
padding: 0.5ex; position: relative; -k-z-index: 5;
}
.fancyBg {
border: 1px dashed black; position: relative; color: white; font-weight: bold;
z-index: 0; /*background: black;*/
}
.fancyBg:before {content:'-'; display: block;
position: absolute; background: red; opacity: .5;
top: 2ex; right: -2ex; bottom: -2ex; left: 2ex;
/*top: 0; right: 0; bottom: 0; left: 0;*/
z-index: -1;
}
В этом случае .fancyBg:before
имеет свойства CSS, которые вы хотите иметь с прозрачностью (красный фон в этом примере, но может быть изображением или границами). Он позиционируется как абсолютный, чтобы переместить его за .fancyBg
(используйте значения нуля или что-то более подходящее для ваших нужд).
У CSS3 есть легкое решение вашей проблемы. Использование:
background-color:rgba(0,255,0,0.5);
Здесь rgba означает красный, зеленый, синий и альфа-значение. Зеленое значение получается из-за 255, а половина прозрачности получается по 0,5 альфа-значения.
Вы можете использовать цвет RGB с непрозрачностью, подобный этому цветовому коду в RGB (63,245,0), и добавить непрозрачность (63,245,0,0,5), а также добавить RGBA вместо RGB. Использование для непрозрачности
div{
background:rgba(63,245,0,0.5);
}