ASP.NET Core 7.0+Razor站点如何独立创建可自定义的颜色图例？

一、推荐插件/库 #

如果偏好现成工具，这些轻量、高自定义的选项适合单独构建颜色图例：

• Legend.js：专门针对图例的jQuery插件，体积小，支持自定义颜色块尺寸、标签样式、布局方向（横向/纵向），还能绑定点击、悬停等交互事件，直接在Razor页面引入jQuery和插件脚本即可快速初始化。
• Bootstrap Legend：基于Bootstrap生态的组件，样式和现有Bootstrap页面天然兼容，通过CSS类就能调整颜色块大小、间距、排列方式，无需额外适配样式，适合用Bootstrap搭建的项目。
• SimpleLegend：无依赖的纯JS库，初始化仅需传入图例配置数组（包含颜色、标签），支持自定义CSS类覆盖样式，不用引入任何框架，追求轻量场景首选。

二、手动实现方案（无依赖，完全可控） #

如果不想引入第三方库，直接用HTML+CSS+Razor语法就能快速实现，灵活性拉满：

1. 静态图例（固定数据） #

在Razor视图中编写基础结构，配合CSS定义样式：

<!-- HTML结构 -->
<div class="legend-container">
    <div class="legend-item">
        <span class="legend-color" style="background-color: #ff4d4f;"></span>
        <span class="legend-text">错误状态</span>
    </div>
    <div class="legend-item">
        <span class="legend-color" style="background-color: #52c41a;"></span>
        <span class="legend-text">成功状态</span>
    </div>
    <div class="legend-item">
        <span class="legend-color" style="background-color: #faad14;"></span>
        <span class="legend-text">警告状态</span>
    </div>
</div>

<!-- CSS样式 -->
<style>
.legend-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
    padding: 1rem;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    background-color: #fafafa;
}
.legend-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    transition: all 0.2s;
}
.legend-item:hover {
    opacity: 0.8;
}
.legend-color {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 3px;
}
.legend-text {
    font-size: 0.95rem;
    color: #333;
}
</style>

2. 动态生成（后端传数据） #

如果图例数据来自后端，用Razor循环直接渲染：

@{
    // 模拟后端传入的图例数据
    var legendData = new List<(string HexColor, string DisplayName)>
    {
        ("#1890ff", "已完成"),
        ("#722ed1", "处理中"),
        ("#13c2c2", "待启动"),
        ("#f5222d", "已取消")
    };
}

<div class="legend-container">
    @foreach (var item in legendData)
    {
        <div class="legend-item">
            <span class="legend-color" style="background-color: @item.HexColor;"></span>
            <span class="legend-text">@item.DisplayName</span>
        </div>
    }
</div>

<!-- 复用上面的CSS样式即可 -->

3. 交互增强（可选） #

添加JS实现点击图例的业务逻辑，比如过滤页面数据：

document.querySelectorAll('.legend-item').forEach(item => {
    item.addEventListener('click', function() {
        this.classList.toggle('active');
        // 这里添加你的业务逻辑，比如根据图例项过滤表格数据
        const label = this.querySelector('.legend-text').textContent;
        console.log(`点击了图例：${label}`);
    });
});

内容的提问来源于stack exchange，提问作者cavlier145