当前位置：首页 > news >正文

ContEx高级技巧：自定义CSS样式和图表主题定制指南

news 2026/7/4 6:53:35

ContEx高级技巧：自定义CSS样式和图表主题定制指南

【免费下载链接】contexCharting and graphing library for Elixir项目地址: https://gitcode.com/gh_mirrors/co/contex

想要让你的Elixir图表脱颖而出吗？ContEx作为一款强大的服务器端图表库，提供了完整的自定义CSS样式和主题定制功能，让你可以轻松创建符合品牌风格的个性化图表。本指南将为你展示如何通过简单配置实现专业级的图表美化效果。

🎨 ContEx图表样式定制基础

ContEx生成的SVG图表内置了一套默认的CSS类名系统，让你可以轻松地通过外部样式表来控制图表的外观。每个图表元素都有特定的CSS类，这意味着你可以像控制网页元素一样控制图表样式。

核心CSS类名解析

ContEx使用一套精心设计的CSS类名系统，让你可以精确控制图表的每个部分：

.exc-tick- 坐标轴刻度线
.exc-domain- 坐标轴线
.exc-grid- 网格线
.exc-legend- 图例样式
.exc-title- 图表标题
.exc-subtitle- 图表副标题
.exc-barlabel-in- 柱状图内部标签
.exc-barlabel-out- 柱状图外部标签

🔧 自定义CSS样式实战

1. 创建自定义样式表

首先，创建一个CSS文件来覆盖ContEx的默认样式。你可以参考官方提供的contex.css文件作为起点：

/* 自定义坐标轴样式 */ .exc-tick line { stroke: #4CAF50; /* 绿色刻度线 */ stroke-width: 1.5px; } .exc-tick text { fill: #333; /* 深灰色文字 */ font-size: 12px; font-family: 'Segoe UI', Roboto, sans-serif; } /* 自定义坐标轴线 */ .exc-domain { stroke: #2196F3; /* 蓝色坐标轴线 */ stroke-width: 2px; } /* 自定义网格线 */ .exc-grid { stroke: #E0E0E0; /* 浅灰色网格 */ stroke-dasharray: 4,4; /* 虚线样式 */ } /* 自定义标题样式 */ .exc-title { fill: #1976D2; /* 蓝色标题 */ font-size: 24px; font-weight: bold; font-family: 'Arial', sans-serif; } .exc-subtitle { fill: #757575; /* 灰色副标题 */ font-size: 14px; font-style: italic; }

2. 应用自定义样式到图表

在Elixir代码中，你可以通过设置:default_style选项来控制是否使用默认样式：

# 禁用默认样式，使用自定义CSS plot = Plot.new(dataset, Contex.BarChart, 600, 400, default_style: false, mapping: %{x_col: :category, y_cols: [:value]} ) # 或者保留默认样式作为后备 plot = Plot.new(dataset, Contex.BarChart, 600, 400, default_style: true # 这是默认值 )

🎯 高级主题定制技巧

创建品牌主题

你可以为不同的品牌或应用场景创建多个主题文件：

/* dark-theme.css - 深色主题 */ .dark-theme .exc-tick line { stroke: #90CAF9; } .dark-theme .exc-tick text { fill: #E0E0E0; } .dark-theme .exc-domain { stroke: #64B5F6; } .dark-theme .exc-grid { stroke: #424242; } .dark-theme .exc-title { fill: #BB86FC; } /* light-theme.css - 浅色主题 */ .light-theme .exc-tick line { stroke: #1976D2; } .light-theme .exc-tick text { fill: #212121; } .light-theme .exc-domain { stroke: #2196F3; } .light-theme .exc-grid { stroke: #F5F5F5; } .light-theme .exc-title { fill: #0D47A1; }

响应式图表样式

通过CSS媒体查询，你可以让ContEx图表在不同设备上显示不同的样式：

/* 移动设备样式 */ @media (max-width: 768px) { .exc-tick text { font-size: 10px; } .exc-title { font-size: 18px; } .exc-subtitle { font-size: 12px; } } /* 平板设备样式 */ @media (min-width: 769px) and (max-width: 1024px) { .exc-tick text { font-size: 11px; } .exc-title { font-size: 20px; } }

🌈 颜色方案定制

使用CSS变量定义调色板

现代CSS变量让颜色管理变得更加简单：

:root { --chart-primary: #2196F3; --chart-secondary: #4CAF50; --chart-accent: #FF9800; --chart-text: #212121; --chart-grid: #E0E0E0; --chart-background: #FFFFFF; } .exc-tick line { stroke: var(--chart-primary); } .exc-domain { stroke: var(--chart-secondary); } .exc-grid { stroke: var(--chart-grid); } .exc-title { fill: var(--chart-text); } /* 深色模式支持 */ @media (prefers-color-scheme: dark) { :root { --chart-primary: #64B5F6; --chart-secondary: #81C784; --chart-accent: #FFB74D; --chart-text: #E0E0E0; --chart-grid: #424242; --chart-background: #121212; } }

渐变色效果

为图表元素添加渐变色效果：

/* 创建SVG渐变定义 */ .exc-gradient-bar { fill: url(#bar-gradient); } /* 在SVG中定义渐变 */ <svg> <defs> <linearGradient id="bar-gradient" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" style="stop-color:#2196F3;stop-opacity:1" /> <stop offset="100%" style="stop-color:#1976D2;stop-opacity:0.8" /> </linearGradient> </defs> </svg>

🛠️ 实用配置示例

1. 商务报告样式

/* business-report.css */ .business-chart .exc-tick line { stroke: #546E7A; stroke-width: 1px; } .business-chart .exc-tick text { fill: #37474F; font-size: 11px; font-family: 'Roboto', 'Helvetica Neue', sans-serif; } .business-chart .exc-domain { stroke: #455A64; stroke-width: 1.5px; } .business-chart .exc-grid { stroke: #CFD8DC; } .business-chart .exc-title { fill: #263238; font-size: 20px; font-weight: 500; font-family: 'Roboto', sans-serif; } .business-chart .exc-subtitle { fill: #607D8B; font-size: 13px; }

2. 数据大屏样式

/* dashboard-chart.css */ .dashboard .exc-tick line { stroke: #78909C; stroke-width: 2px; } .dashboard .exc-tick text { fill: #ECEFF1; font-size: 14px; font-weight: 300; } .dashboard .exc-domain { stroke: #90A4AE; stroke-width: 2px; } .dashboard .exc-grid { stroke: #37474F; stroke-opacity: 0.5; } .dashboard .exc-title { fill: #FFFFFF; font-size: 24px; font-weight: 300; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }

📊 图表类型特定样式

柱状图美化

/* 柱状图特定样式 */ .bar-chart .exc-bar { transition: fill 0.3s ease; } .bar-chart .exc-bar:hover { fill: #FF9800 !important; cursor: pointer; } /* 柱状图标签 */ .exc-barlabel-in { fill: white; font-size: 12px; font-weight: bold; text-shadow: 1px 1px 2px rgba(0,0,0,0.5); } .exc-barlabel-out { fill: #616161; font-size: 11px; font-weight: 500; }

折线图美化

/* 折线图特定样式 */ .line-chart .exc-line { stroke-width: 3px; stroke-linecap: round; stroke-linejoin: round; } .line-chart .exc-point { fill: white; stroke-width: 2px; r: 4px; } .line-chart .exc-point:hover { r: 6px; stroke-width: 3px; }

🔍 调试与优化技巧

1. 使用浏览器开发者工具

在浏览器中检查ContEx生成的SVG元素，查看应用的CSS类名：

右键点击图表 → 检查元素
查看SVG结构中的CSS类名
在控制台中实时修改样式

2. 样式优先级管理

记住CSS优先级规则：

内联样式 > ID选择器 > 类选择器 > 元素选择器
ContEx使用类选择器，所以你的自定义样式需要具有相同的特异性

3. 性能优化建议

/* 避免使用昂贵的CSS属性 */ .exc-chart { /* 避免使用box-shadow在大量元素上 */ /* box-shadow: 0 2px 4px rgba(0,0,0,0.1); */ /* 使用transform代替top/left进行动画 */ transition: transform 0.3s ease; } /* 使用will-change提示浏览器优化 */ .exc-bar { will-change: fill; }