Charts.css图表类型实战：柱状图与条形图

原创 于 2025-08-27 09:18:52 发布 · 385 阅读 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

Charts.css图表类型实战：柱状图与条形图

【免费下载链接】charts.css Open source CSS framework for data visualization. 【免费下载链接】charts.css 项目地址: https://gitcode.com/gh_mirrors/ch/charts.css

本文深入探讨了Charts.css框架中柱状图和条形图的实现原理与实战应用。文章详细介绍了Column图表的核心实现机制，包括Flexbox布局系统、尺寸计算、方向控制和间距调整等技术要点。同时涵盖了Bar图表的不同方向配置、多数据集堆叠图表的实现方法，以及数据反转与标签自定义等高级技巧，为开发者提供全面的纯CSS数据可视化解决方案。

Column图表实现原理与使用示例

在Charts.css中，Column图表（柱状图）是一种基于纯CSS实现的数据可视化组件，它通过语义化的HTML结构和灵活的CSS类来创建直观的柱状图展示。与传统的JavaScript图表库不同，Charts.css采用无依赖的CSS框架方式，让开发者能够快速构建响应式、可定制的柱状图。

Column图表的核心实现原理

Column图表的实现基于现代CSS布局技术，主要利用了Flexbox布局和CSS自定义属性（CSS Variables）。让我们通过一个流程图来理解其核心工作原理：

mermaid

核心CSS实现机制

Column图表的CSS实现主要包含以下几个关键部分：

  1. Flexbox布局系统：使用display: flex创建灵活的柱状图容器
  2. 尺寸计算：通过--size自定义属性控制每个柱状条的高度比例
  3. 方向控制：支持多种方向反转选项（reverse、reverse-data、reverse-labels）
  4. 间距调整：提供data-spacing-*类来控制柱状条之间的间距

基础Column图表使用示例

下面是一个最基本的Column图表实现示例：

<table class="charts-css column show-labels show-primary-axis">
  <caption>月度销售额统计</caption>
  <thead>
    <tr>
      <th scope="col">月份</th>
      <th scope="col">销售额（万元）</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">一月</th>
      <td style="--size: calc(80/120);">80</td>
    </tr>
    <tr>
      <th scope="row">二月</th>
      <td style="--size: calc(95/120);">95</td>
    </tr>
    <tr>
      <th scope="row">三月</th>
      <td style="--size: calc(120/120);">120</td>
    </tr>
    <tr>
      <th scope="row">四月</th>
      <td style="--size: calc(105/120);">105</td>
    </tr>
  </tbody>
</table>

多数据集Column图表

Charts.css支持多数据集的柱状图展示，非常适合对比分析场景：

<table class="charts-css column multiple show-labels show-primary-axis data-spacing-5">
  <caption>2023年产品销量对比</caption>
  <thead>
    <tr>
      <th scope="col">季度</th>
      <th scope="col">产品A</th>
      <th scope="col">产品B</th>
      <th scope="col">产品C</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Q1</th>
      <td style="--size: calc(150/300); --color: #4CAF50;">150</td>
      <td style="--size: calc(200/300); --color: #2196F3;">200</td>
      <td style="--size: calc(120/300); --color: #FF9800;">120</td>
    </tr>
    <tr>
      <th scope="row">Q2</th>
      <td style="--size: calc(180/300); --color: #4CAF50;">180</td>
      <td style="--size: calc(220/300); --color: #2196F3;">220</td>
      <td style="--size: calc(140/300); --color: #FF9800;">140</td>
    </tr>
    <tr>
      <th scope="row">Q3</th>
      <td style="--size: calc(210/300); --color: #4CAF50;">210</td>
      <td style="--size: calc(250/300); --color: #2196F3;">250</td>
      <td style="--size: calc(160/300); --color: #FF9800;">160</td>
    </tr>
  </tbody>
</table>

高级配置选项

Column图表提供了丰富的高级配置选项，让开发者能够精确控制图表的各个方面：

方向控制选项
类名描述效果
reverse反转图表方向柱状条从顶部开始
reverse-data反转数据顺序数据从右到左显示
reverse-labels反转标签位置标签显示在另一侧
间距控制选项
<!-- 不同间距示例 -->
<table class="charts-css column data-spacing-2">...</table>
<table class="charts-css column data-spacing-5">...</table>
<table class="charts-css column data-spacing-10">...</table>
数据位置控制
<table class="charts-css column data-start">   <!-- 数据在柱状条起始位置 -->
<table class="charts-css column data-center">  <!-- 数据在柱状条中间 -->
<table class="charts-css column data-end">     <!-- 数据在柱状条结束位置 -->
<table class="charts-css column data-outside"> <!-- 数据在柱状条外部 -->

响应式设计实践

Column图表天然支持响应式设计，可以轻松适应不同屏幕尺寸：

/* 移动端适配 */
@media (max-width: 768px) {
  .charts-css.column {
    --aspect-ratio: 16/9; /* 调整宽高比 */
  }
  
  .charts-css.column tbody tr {
    flex-direction: column; /* 小屏幕时改为垂直布局 */
  }
}

自定义样式与主题

通过CSS自定义属性，可以轻松创建个性化的Column图表主题：

:root {
  --color-1: #ff6b6b;
  --color-2: #4ecdc4;
  --color-3: #45b7d1;
  --color-4: #f9ca24;
}

.custom-column-theme {
  --primary-axis-color: #2c3e50;
  --secondary-axis-color: #ecf0f1;
  --data-background: linear-gradient(45deg, var(--color-1), var(--color-2));
}

性能优化建议

  1. 减少DOM节点：尽量使用多数据集而不是多个单数据集图表
  2. 合理使用CSS变量：避免过度复杂的计算表达式
  3. 硬件加速：对动画效果使用transform和opacity属性
  4. 按需加载：只引入需要的图表类型CSS

常见问题与解决方案

问题解决方案
柱状条高度不正确检查--size值的计算，确保分母为最大值
标签显示异常确认使用了show-labels类
颜色不生效检查--color或--color-*变量的设置
响应式问题添加适当的媒体查询和flexbox配置

Column图表作为Charts.css的核心组件之一，展现了纯CSS实现数据可视化的强大能力。通过灵活的类组合和CSS自定义属性，开发者可以创建出既美观又功能丰富的柱状图，而无需依赖任何JavaScript库。这种实现方式不仅减少了页面加载时间，还提供了更好的可访问性和维护性。

Bar图表的不同方向与样式配置

在Charts.css中，Bar图表提供了丰富的方向控制和样式配置选项，让开发者能够灵活地创建各种不同布局和方向的条形图。通过简单的CSS类组合，即可实现从基础的垂直条形图到复杂的多方向组合图表。

基础方向控制

Bar图表支持四种主要的方向控制类，每种类都对应不同的布局效果：

方向类名描述效果
reverse反转条形图的方向条形从底部向上增长
reverse-data反转数据顺序数据从上到下反向排列
reverse-labels反转标签位置标签显示在条形的另一侧
reverse-datasets反转数据集顺序多数据集时改变堆叠顺序

方向组合示例

通过组合不同的方向类，可以创建出多种布局变体：

<!-- 标准垂直条形图 -->
<table class="charts-css bar show-labels show-primary-axis">
  <!-- 表格内容 -->
</table>

<!-- 反转方向的条形图 -->
<table class="charts-css bar show-labels show-primary-axis reverse">
  <!-- 表格内容 -->
</table>

<!-- 反转数据顺序的条形图 -->
<table class="charts-css bar show-labels show-primary-axis reverse-data">
  <!-- 表格内容 -->
</table>

<!-- 组合使用多个方向控制 -->
<table class="charts-css bar show-labels show-primary-axis reverse reverse-data reverse-labels">
  <!-- 表格内容 -->
</table>

布局流程解析

Bar图表的布局处理遵循特定的CSS Flexbox逻辑，其布局决策流程如下：

mermaid

间距控制配置

Bar图表提供了精细的间距控制，通过data-spacing-{n}和datasets-spacing-{n}类来控制条形之间的间距：

<!-- 条形之间10px间距 -->
<table class="charts-css bar data-spacing-10">
  <!-- 表格内容 -->
</table>

<!-- 多数据集条形之间5px间距 -->
<table class="charts-css bar multiple datasets-spacing-5">
  <!-- 表格内容 -->
</table>

间距值支持1到20的范围，为开发者提供了灵活的视觉调整能力。

堆叠条形图的方向控制

对于多数据集的堆叠条形图，方向控制更加复杂但功能强大：

<!-- 标准堆叠条形图 -->
<table class="charts-css bar stacked multiple show-labels">
  <!-- 多个数据列 -->
</table>

<!-- 反转数据集顺序的堆叠条形图 -->
<table class="charts-css bar stacked multiple reverse-datasets">
  <!-- 多个数据列 -->
</table>

<!-- 组合方向控制的堆叠条形图 -->
<table class="charts-css bar stacked multiple reverse reverse-data reverse-datasets">
  <!-- 多个数据列 -->
</table>

响应式方向适配

Bar图表还支持基于文本方向的自动适配，通过CSS的:dir()伪类实现RTL（从右到左）语言的自动适配：

/* LTR语言下的数据标签位置 */
.data.outside:dir(ltr) {
  transform: translateX(100%);
}

/* RTL语言下的数据标签位置 */  
.data.outside:dir(rtl) {
  transform: translateX(-100%);
}

这种设计确保了图表在国际化环境中的一致性表现。

实际应用场景

不同的方向配置适用于不同的数据展示需求：

  1. reverse类：适用于强调负向数据或对比分析
  2. reverse-data类：适用于时间序列数据的反向显示
  3. reverse-labels类：适用于空间受限的窄屏布局
  4. reverse-datasets类：适用于突出特定数据集的堆叠图表

通过灵活组合这些方向控制类，开发者可以创建出适应各种业务场景的专业条形图，而无需编写复杂的自定义CSS代码。

多数据集堆叠图表的实现方法

堆叠图表是数据可视化中一种强大的展示方式，它能够清晰地展示多个数据集的累积效果以及各部分在整体中的占比。Charts.css 通过简洁的 CSS 类名和语义化的 HTML 结构，让开发者能够轻松创建各种堆叠图表。

堆叠图表的基本概念

堆叠图表将多个数据集垂直或水平堆叠在一起，每个数据条代表一个类别的总和，而条的不同部分则代表该类别下不同子类别的值。这种图表类型特别适合展示：

  • 多个数据系列在时间维度上的变化
  • 各部分在整体中的占比关系
  • 不同类别数据的累积效果

创建堆叠柱状图

在 Charts.css 中，创建堆叠柱状图非常简单。首先需要设置 multiple 类来表示多数据集，然后添加 stacked 类来启用堆叠效果：

<table class="charts-css column show-heading show-labels show-data-on-hover 
             show-primary-axis show-10-secondary-axes data-spacing-5 
             multiple stacked">
  <caption>季度销售数据堆叠分析</caption>
  <thead>
    <tr>
      <th scope="col">季度</th>
      <th scope="col">产品A</th>
      <th scope="col">产品B</th>
      <th scope="col">产品C</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Q1</th>
      <td style="--size: calc(30/100); --color: var(--color-1);">30</td>
      <td style="--size: calc(40/100); --color: var(--color-2);">40</td>
      <td style="--size: calc(30/100); --color: var(--color-3);">30</td>
    </tr>
    <tr>
      <th scope="row">Q2</th>
      <td style="--size: calc(25/100); --color: var(--color-1);">25</td>
      <td style="--size: calc(35/100); --color: var(--color-2);">35</td>
      <td style="--size: calc(40/100); --color: var(--color-3);">40</td>
    </tr>
    <tr>
      <th scope="row">Q3</th>
      <td style="--size: calc(35/100); --color: var(--color-1);">35</td>
      <td style="--size: calc(30/100); --color: var(--color-2);">30</td>
      <td style="--size: calc(35/100); --color: var(--color-3);">35</td>
    </tr>
    <tr>
      <th scope="row">Q4</th>
      <td style="--size: calc(40/100); --color: var(--color-1);">40</td>
      <td style="--size: calc(25/100); --color: var(--color-2);">25</td>
      <td style="--size: calc(35/100); --color: var(--color-3);">35</td>
    </tr>
  </tbody>
</table>

堆叠条形图的实现

堆叠条形图与堆叠柱状图类似，只是方向不同。使用 bar 类代替 column 类：

<table class="charts-css bar show-heading show-labels show-data-on-hover 
             show-primary-axis show-2-secondary-axes show-data-axes 
             data-spacing-8 multiple stacked">
  <caption>部门预算分配堆叠分析</caption>
  <thead>
    <tr>
      <th scope="col">部门</th>
      <th scope="col">人力成本</th>
      <th scope="col">物料成本</th>
      <th scope="col">运营成本</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">技术部</th>
      <td style="--size: calc(50/100); --color: var(--color-1);">50%</td>
      <td style="--size: calc(30/100); --color: var(--color-2);">30%</td>
      <td style="--size: calc(20/100); --color: var(--color-3);">20%</td>
    </tr>
    <tr>
      <th scope="row">市场部</th>
      <td style="--size: calc(40/100); --color: var(--color-1);">40%</td>
      <td style="--size: calc(20/100); --color: var(--color-2);">20%</td>
      <td style="--size: calc(40/100); --color: var(--color-3);">40%</td>
    </tr>
    <tr>
      <th scope="row">销售部</th>
      <td style="--size: calc(30/100); --color: var(--color-1);">30%</td>
      <td style="--size: calc(40/100); --color: var(--color-2);">40%</td>
      <td style="--size: calc(30/100); --color: var(--color-3);">30%</td>
    </tr>
  </tbody>
</table>

自定义堆叠图表样式

Charts.css 提供了丰富的自定义选项来控制堆叠图表的外观：

颜色定制

通过 CSS 变量为不同的数据集定义颜色：

table.charts-css.stacked {
  --color-1: rgba(65, 105, 225, 0.7);  /* 皇家蓝 */
  --color-2: rgba(220, 20, 60, 0.7);   /* 深红色 */
  --color-3: rgba(50, 205, 50, 0.7);   /* 酸橙绿 */
  --color-4: rgba(255, 165, 0, 0.7);   /* 橙色 */
}
间距控制

使用 datasets-spacing-{n} 类控制数据集之间的间距：

<table class="charts-css column multiple stacked datasets-spacing-2">
  <!-- 表格内容 -->
</table>
方向控制

Charts.css 支持多种方向控制选项：

类名描述效果
reverse反转图表方向从下到上或从右到左
reverse-data反转数据顺序数据点顺序反转
reverse-datasets反转数据集堆叠顺序堆叠顺序从上到下或从右到左
reverse-labels反转标签位置标签显示在另一侧

堆叠图表的高级配置

百分比堆叠

通过计算相对值来实现百分比堆叠效果：

<tr>
  <th scope="row">一月</th>
  <td style="--size: calc(12000/50000);">12,000</td>
  <td style="--size: calc(18000/50000);">18,000</td>
  <td style="--size: calc(20000/50000);">20,000</td>
</tr>
动态堆叠高度

使用 CSS 变量动态控制堆叠高度：

:root {
  --stack-total: 100; /* 定义基准值 */
}

td[style*="--size"] {
  --actual-size: calc(var(--size) * var(--stack-total));
  height: calc(100% * var(--actual-size));
}

响应式堆叠图表

Charts.css 的堆叠图表天生支持响应式设计：

@media (max-width: 768px) {
  .charts-css.column.stacked tbody {
    aspect-ratio: 16/9; /* 移动端更宽的比例 */
  }
  
  .charts-css.bar.stacked tbody {
    aspect-ratio: 9/16; /* 移动端更高的比例 */
  }
}

堆叠图表的交互效果

通过添加交互类增强用户体验：

<table class="charts-css column multiple stacked show-data-on-hover 
             highlight-dataset-on-hover">
  <!-- 表格内容 -->
</table>

最佳实践和注意事项

  1. 数据标准化：确保所有数据使用相同的度量单位
  2. 颜色对比：使用足够对比度的颜色区分不同数据集
  3. 标签清晰：为每个堆叠部分提供清晰的标签说明
  4. 限制数据集数量：建议最多使用5-7个堆叠层，避免视觉混乱
  5. 提供图例：使用 show-legend 类或自定义图例说明颜色含义

mermaid

通过 Charts.css 的堆叠图表功能，开发者可以快速创建专业级的数据可视化效果，而无需复杂的 JavaScript 代码。这种基于纯 CSS 的解决方案既轻量又灵活，非常适合现代 Web 应用的数据展示需求。

数据反转与标签自定义技巧

在数据可视化中，数据的呈现顺序和标签的显示方式直接影响用户对信息的理解。Charts.css 提供了强大的数据反转和标签自定义功能，让开发者能够灵活控制图表的表现形式，从而更好地传达数据故事。

数据反转的三种维度

Charts.css 支持三种不同维度的数据反转操作，每种都有其特定的应用场景：

1. 数据顺序反转 (reverse-data)

数据顺序反转是最常用的反转操作，它改变数据条目的显示顺序。在柱状图和条形图中，这会影响数据点的排列方向。

<!-- 正常数据顺序 -->
<table class="charts-css bar">
  <tbody>
    <tr><th>一月</th><td style="--size: 0.3;"></td></tr>
    <tr><th>二月</th><td style="--size: 0.5;"></td></tr>
    <tr><th>三月</th><td style="--size: 0.8;"></td></tr>
  </tbody>
</table>

<!-- 反转数据顺序 -->
<table class="charts-css bar reverse-data">
  <tbody>
    <tr><th>一月</th><td style="--size: 0.3;"></td></tr>
    <tr><th>二月</th><td style="--size: 0.5;"></td></tr>
    <tr><th>三月</th><td style="--size: 0.8;"></td></tr>
  </tbody>
</table>

应用场景：

  • 时间序列数据从最新到最旧显示
  • 排名数据从高到低排列
  • 需要突出显示特定数据点时
2. 数据集反转 (reverse-datasets)

数据集反转主要影响堆叠图表中不同数据系列的显示顺序。

<table class="charts-css bar stacked reverse-datasets">
  <tbody>
    <tr>
      <th>产品A</th>
      <td style="--size: 0.4; --color: var(--color-1);"></td>
      <td style="--size: 0.6; --color: var(--color-2);"></td>
    </tr>
  </tbody>
</table>

应用场景：

  • 调整堆叠图表中各系列的上下顺序
  • 确保重要数据系列在最显眼位置
  • 符合特定的视觉设计规范
3. 标签位置反转 (reverse-labels)

标签位置反转改变标签相对于数据条的显示位置，为图表布局提供更多灵活性。

<table class="charts-css bar reverse-labels">
  <tbody>
    <tr><th>项目A</th><td style="--size: 0.7;"></td></tr>
    <tr><th>项目B</th><td style="--size: 0.5;"></td></tr>
  </tbody>
</table>

反转组合效果

Charts.css 允许将多种反转效果组合使用，创造出丰富的视觉表现形式：

组合方式类名效果描述
基础反转reverse改变数据条的延伸方向
数据顺序反转reverse-data反转数据条目的排列顺序
标签位置反转reverse-labels改变标签相对于数据条的位置
数据集反转reverse-datasets反转堆叠数据系列的顺序

mermaid

高级标签自定义技巧

除了基本的反转功能，Charts.css 还提供了丰富的标签自定义选项：

1. 多行标签支持
<table class="charts-css bar">
  <tbody>
    <tr>
      <th>
        第一季度<br>
        <small>2023年</small>
      </th>
      <td style="--size: 0.65;"></td>
    </tr>
  </tbody>
</table>
2. 自定义标签样式

通过CSS变量控制标签的尺寸和位置：

.custom-chart {
  --labels-size: 120px; /* 标签区域宽度 */
  --data-position: flex-start; /* 数据值位置 */
}
3. 条件性标签显示
<table class="charts-css bar show-labels-on-hover">
  <tbody>
    <tr>
      <th>敏感数据</th>
      <td style="--size: 0.45;">
        <span class="tooltip">详细数据: 45%</span>
      </td>
    </tr>
  </tbody>
</table>

实战案例：销售数据仪表板

假设我们需要创建一个销售数据仪表板，要求：

  1. 最新月份数据显示在最前面
  2. 标签显示完整的月份名称和年份
  3. 重要数据突出显示
<table class="charts-css column reverse-data show-heading show-labels 
              show-primary-axis show-4-secondary-axes data-spacing-3">
  <caption>2023年月度销售业绩</caption>
  <thead>
    <tr>
      <th scope="col">月份</th>
      <th scope="col">销售额（万元）</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">十二月<br><small>2023</small></th>
      <td style="--size: calc(120/100);">120</td>
    </tr>
    <tr>
      <th scope="row">十一月<br><small>2023</small></th>
      <td style="--size: calc(95/100);">95</td>
    </tr>
    <tr>
      <th scope="row">十月<br><small>2023</small></th>
      <td style="--size: calc(110/100); background-color: #ff6b6b;">
        110 🔥
      </td>
    </tr>
    <!-- 更多月份数据 -->
  </tbody>
</table>

性能优化建议

当处理大量数据时，合理使用反转功能可以提升用户体验：

  1. 按需使用反转：只在必要时添加反转类，减少浏览器渲染负担
  2. 预计算样式：对于静态数据，提前计算好--size值
  3. 分层加载：先显示基础图表，再应用反转效果

mermaid

通过掌握Charts.css的数据反转和标签自定义技巧，你可以创建出更加专业和灵活的数据可视化界面，更好地满足不同业务场景的需求。

总结

通过本文的全面介绍，我们可以看到Charts.css为柱状图和条形图提供了强大而灵活的纯CSS实现方案。从基础的Column图表实现原理到高级的多数据集堆叠技术，从简单的方向控制到复杂的数据反转与标签自定义，Charts.css都展现了其作为无依赖CSS框架的独特优势。这种基于语义化HTML和现代CSS技术的实现方式，不仅减少了页面加载时间，还提供了出色的可访问性和维护性，是现代Web数据可视化的理想选择。

【免费下载链接】charts.css Open source CSS framework for data visualization. 【免费下载链接】charts.css 项目地址: https://gitcode.com/gh_mirrors/ch/charts.css

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值