博客 (4)

以下是 Spectre.Console 的核心功能示例，涵盖最常用的输出和交互场景：

1. 基础富文本输出

using Spectre.Console;

// 使用 Markup 语法（类似 BBCode）
AnsiConsole.Markup("[bold green]成功！[/] 文件已保存。\n");
AnsiConsole.Markup("[red]错误：[/] 无法连接到服务器。\n");

// 混合样式
AnsiConsole.Markup("[underline blue]https://example.com[/]\n");

// 自动换行写
AnsiConsole.Write(new Panel("[yellow]警告[/] 磁盘空间不足")
    .Header("系统通知")
    .Border(BoxBorder.Rounded));

2. 表格

var table = new Table();
table.AddColumn("[u]ID[/]");
table.AddColumn(new TableColumn("[u]名称[/]").Centered());
table.AddColumn("[u]状态[/]");

table.AddRow("1", "订单服务", "[green]运行中[/]");
table.AddRow("2", "支付网关", "[red]离线[/]");
table.AddRow("3", "消息队列", "[yellow]警告[/]");

AnsiConsole.Write(table);

3. 进度条 / 状态指示

// 带进度条的循环任务
await AnsiConsole.Progress()
    .StartAsync(async ctx =>
    {
        var task1 = ctx.AddTask("[green]下载文件[/]", maxValue: 100);
        var task2 = ctx.AddTask("[green]处理数据[/]", maxValue: 100);

        while (!ctx.IsFinished)
        {
            task1.Increment(1.5);
            task2.Increment(0.8);
            await Task.Delay(50);
        }
    });

// 不确定时长的旋转状态
await AnsiConsole.Status()
    .StartAsync("正在连接...", async ctx =>
    {
        await Task.Delay(3000); // 模拟工作
        AnsiConsole.MarkupLine("[green]连接成功！[/]");
    });

4. 交互式提示

// 确认
if (AnsiConsole.Confirm("是否继续安装？"))
{
    // 执行安装
}

// 文本输入（带验证）
var name = AnsiConsole.Prompt(
    new TextPrompt<string>("请输入用户名：")
        .ValidationErrorMessage("[red]用户名不能为空[/]")
        .Validate(input => !string.IsNullOrWhiteSpace(input)));

// 选择列表
var fruit = AnsiConsole.Prompt(
    new SelectionPrompt<string>()
        .Title("请选择最喜欢的水果")
        .AddChoices(new[] { "苹果", "香蕉", "橙子", "葡萄" }));

AnsiConsole.MarkupLine($"你选择了：[green]{fruit}[/]");

// 多选
var colors = AnsiConsole.Prompt(
    new MultiSelectionPrompt<string>()
        .Title("请选择颜色")
        .AddChoices(new[] { "红色", "绿色", "蓝色", "黄色" }));

5. 树形结构

var root = new Tree("[yellow]项目结构[/]");
var src = root.AddNode("src");
src.AddNode("Program.cs");
src.AddNode("Services");
src.AddNode("Models");

var tests = root.AddNode("tests");
tests.AddNode("UnitTests");

AnsiConsole.Write(root);

6. 布局 / 网格

var layout = new Layout("Root")
    .SplitColumns(
        new Layout("Left").Size(30),
        new Layout("Right")
            .SplitRows(
                new Layout("Top"),
                new Layout("Bottom")));

layout["Left"].Update(new Panel("导航栏"));
layout["Top"].Update(new Panel("主内容区"));
layout["Bottom"].Update(new Panel("日志输出"));

AnsiConsole.Write(layout);

7. 实时更新

var table = new Table().AddColumn("Time").AddColumn("Message");
table.AddRow("10:00", "系统启动");

await AnsiConsole.Live(table)
    .StartAsync(async ctx =>
    {
        for (int i = 1; i <= 5; i++)
        {
            await Task.Delay(1000);
            table.AddRow($"10:0{i}", $"事件 {i}");
            ctx.Refresh(); // 刷新显示
        }
    });

8. 带样式的异常显示

try
{
    throw new InvalidOperationException("操作失败");
}
catch (Exception ex)
{
    AnsiConsole.WriteException(ex, ExceptionFormats.ShortenPaths);
}

9. 日历

var calendar = new Calendar(2026, 4);
calendar.AddCalendarEvent(2026, 4, 22); // 标记日期
calendar.HighlightStyle(Style.Parse("yellow bold"));
AnsiConsole.Write(calendar);

10. 条形图 / 柱状图

AnsiConsole.Write(new BarChart()
    .Width(60)
    .Label("[green bold]项目进度[/]")
    .CenterLabel()
    .AddItem("后端", 80, Color.Green)
    .AddItem("前端", 65, Color.Blue)
    .AddItem("测试", 40, Color.Red));

11. 分解图

AnsiConsole.Write(new BreakdownChart()
    .Width(60)
    .AddItem("CPU", 45, Color.Red)
    .AddItem("内存", 30, Color.Blue)
    .AddItem("磁盘", 25, Color.Green));

12. 规则线

AnsiConsole.Write(new Rule("[red]警告区域[/]").RuleStyle("red").LeftJustified());
AnsiConsole.WriteLine("内容");
AnsiConsole.Write(new Rule().RuleStyle("green"));

13. 文本样式

// 大字标题
AnsiConsole.Write(new FigletText("Hello").Color(Color.Green));
// Emoji
AnsiConsole.Markup(":check_mark_button: 成功 :cross_mark: 失败");

14. 网格

var grid = new Grid();
grid.AddColumn(new GridColumn().NoWrap().PadRight(4));
grid.AddColumn();

grid.AddRow("[b]名称[/]", "Spectre.Console");
grid.AddRow("[b]版本[/]", "0.49.1");
grid.AddRow("[b]许可[/]", "MIT");

AnsiConsole.Write(grid);

anichart.js 是一款将数据转化为动态柱状图/线性图的 js/ts 工具，可导出视频。

github: https://github.com/Jannchie/anichart.js

中文使用指南：https://github.com/Jannchie/anichart.js/blob/main/README-CN.md

docs 目录中有更详细的使用方法（英文）。

在线演示：https://xoyozo.net/Demo/BarGraph

目前 release 版本 3.0.0。

这里有一点常用设置示例：https://codesandbox.io/s/anichart-2x-m3xbz?file=/main.js

设置画布尺寸

stage.canvas.width = 1000;
stage.canvas.height = 500;

重设尺寸不会重新计算内部元素的大小和位置，因此对响应式布局不太友好。

配置柱状图

示例：

const barChart = new ani.BarChart({
    dy: 2, // 文字下沉
    imageField: 'logo', // 图标字段名
    itemCount: 16, // 最多显示条数
    dateFormat: '%Y年%-m月', // 日期格式
    barGap: 10, // 柱条间距
    barInfoFormat: () => '', // 隐藏柱条上的文字
});
stage.addChild(barChart);

循环播放

setInterval(function () {
    if (!stage.playing) {
        stage.sec = 0;
        stage.play();
    }
}, 1000);

收录了一些个人觉得不错的网页开发插件。

由于插件更新频繁，本页如有错误请指正，也欢迎告知更多功能强大、使用方便的插件。

微软今天发布了 Net Framework 3.5 的 Chart 控件，弥补了 .Net 平台下缺乏一个十分强力的图表控件。

该图表控件支持多种图表，如饼图，柱状图，曲线图，散点图，雷达图，面积图，股票图等，同时支持 Winform 和 Asp.net。

目前该控件只能用在 .Net Framework 3.5 上，没有查找到 For .Net Framework 2.0 的信息。

补：原来该款控件来自 dundas.com，有 .Net Framework 2.0 版本，需要付费，该公司被微软收购后主推 3.5 版本，并免费。

1. 控件：Microsoft .NET Framework 3.5 的 Microsoft 图表控件 (Microsoft ChartControls for Microsoft .NET Framework 3.5)

   包含英文版，中文版。上面提供的链接是中文版的，可以更改为英文版。

2. 语言包：Microsoft Chart Controls for Microsoft .NET Framework 3.5 LanguagePack

   Microsoft .NET Framework 3.5 的Microsoft 图表控件 的语言包，包含23中语言。

3. Microsoft Chart Controls Add-on for Microsoft Visual Studio 2008

   使 VS2008 支持图表开发的插件。

4. 文档 （Microsoft Chart Controls for .NET Framework Documentation）

   这个只有英文的，没找到中文的。

5. WinForm 和 Asp.net 的例子（SamplesEnvironment for Microsoft Chart Controls）

   这个只有英文的，没找到英文的。

2D的图：

3D的图：

1. Microsoft Chart control for .NET Framework Released!

2.图片来自 http://code.msdn.microsoft.com/mschart 中的 Winform 演示。