100% stacked column

100% stacked column 是一种常见的数据可视化图表类型，它能够将多组数据以百分比的形式进行比较，并且显示每组数据在总量中所占的比例。这种图表通常用于展示不同类别的数据在整体中的比重或者变化趋势，例如市场份额、销售额等。

100% stacked column 图表由多个垂直的柱子组成，每个柱子代表一组数据。每个柱子被分为多个不同颜色的部分，每个部分代表该组数据在总量中的比例。所有柱子的高度都相等，因为它们都代表整体百分比为100%的数据。

100% stacked column 图表能够直观地显示各组数据之间的比较关系和变化趋势，但也可能存在一些缺点，例如当数据组数较多时，图表会变得拥挤难以阅读，而且不适合展示具体数值。

相关问题

column_stack

The `column_stack` function in NumPy is used to stack 1-D arrays as columns into a 2-D array. It takes a sequence of 1-D arrays and returns a 2-D array. If the input arrays have different shapes, they will be broadcasted to a common shape before stacking.

Syntax:

numpy.column_stack(tup)

Parameters:
- `tup`: A sequence of 1-D arrays.

Return Value:
- A 2-D array formed by stacking the input arrays as columns.

Example:

import numpy as np

a = np.array([1, 2, 3])
b = np.array([4, 5, 6])
c = np.array([7, 8, 9])

result = np.column_stack((a, b, c))
print(result)

Output:

array([[1, 4, 7],
       [2, 5, 8],
       [3, 6, 9]])

In the above example, three 1-D arrays `a`, `b`, and `c` are stacked column-wise using the `column_stack` function to form a 2-D array `result`.

Bootstrap flex-column

Bootstrap's `flex-column` class is used to create a flex container that arranges its child elements in a vertical column. This means that the child elements are stacked one on top of the other, from top to bottom.

To use `flex-column`, you need to add it to the parent container element. For example:

<div class="d-flex flex-column">
  <div class="p-2">Child Element 1</div>
  <div class="p-2">Child Element 2</div>
  <div class="p-2">Child Element 3</div>
</div>

In this example, the `d-flex` class sets the display property of the parent element to `flex`, while the `flex-column` class arranges the child elements in a vertical column.

You can also use other Bootstrap classes to control the alignment and spacing of the child elements within the column. For example:

- `align-items-center` to vertically center the child elements
- `justify-content-center` to horizontally center the child elements
- `mb-3` to add a margin-bottom of 3 units to each child element

<div class="d-flex flex-column align-items-center justify-content-center">
  <div class="p-2 mb-3">Child Element 1</div>
  <div class="p-2 mb-3">Child Element 2</div>
  <div class="p-2 mb-3">Child Element 3</div>
</div>