📊 什么是 Chart 帮助器？

Chart 帮助器 是 ASP.NET Web Pages 提供的图表工具，用于将数据以图形化的形式呈现，支持多种类型如柱状图（Bar）、折线图（Line）、饼图（Pie）、区域图（Area）等。

使用 Chart 帮助器，开发者可以直接在 Razor 页面中创建和显示图表，而无需依赖外部 JavaScript 库。

🧱 基本语法

@Chart.GetHtml(
    width: 宽度, 
    height: 高度, 
    theme: "主题名", 
    chartType: "图表类型", 
    xValue: x轴数据, 
    yValues: y轴数据
)

📁 示例：绘制基本柱状图

@Chart.GetHtml(
    width: 600,
    height: 400,
    chartType: "Column",
    xValue: new[] { "苹果", "香蕉", "橙子" },
    yValues: new[] { 30, 50, 70 }
)

该代码会生成一个 600×400 的柱状图，展示三种水果的销量数据。

📈 支持的图表类型

类型说明
Column柱状图
Bar条形图
Line折线图
Pie饼图
Area区域图
Bubble气泡图
Point点图
Radar雷达图
Spline平滑折线图
Stock股票图

🧩 示例：饼图

@Chart.GetHtml(
    width: 400,
    height: 300,
    chartType: "Pie",
    xValue: new[] { "Chrome", "Firefox", "Edge" },
    yValues: new[] { 55, 30, 15 }
)

🧮 多组 Y 轴数据（折线图）

@Chart.GetHtml(
    width: 600,
    height: 400,
    chartType: "Line",
    xValue: new[] { "1月", "2月", "3月" },
    yValues: new[] {
        new[] { 10, 20, 30 },
        new[] { 5, 15, 25 }
    }
)

此示例会绘制两条折线，分别表示两个系列的数据。

🎨 添加图表标题和样式

@Chart.GetHtml(
    width: 600,
    height: 400,
    chartType: "Bar",
    xValue: new[] { "A", "B", "C" },
    yValues: new[] { 10, 20, 30 },
    theme: "Blue"
)

theme 参数支持如：Blue, Green, Vanilla, Vanilla3D, Sky, EarthTones 等。

🔧 Chart 进阶用法：从数据库读取数据

@{
    var db = Database.Open("MyData");
    var data = db.Query("SELECT Category, Quantity FROM Inventory");

    var xValues = data.Select(row => row.Category).ToList();
    var yValues = data.Select(row => (int)row.Quantity).ToList();
}

@Chart.GetHtml(
    width: 700,
    height: 400,
    chartType: "Column",
    xValue: xValues,
    yValues: yValues
)

此示例从数据库中获取类别和数量，并生成图表。

🧱 保存图表为图片

@{
    var chart = new Chart(width: 600, height: 400);
    chart.AddTitle("销售统计");
    chart.AddSeries(
        chartType: "Column",
        xValue: new[] { "Q1", "Q2", "Q3", "Q4" },
        yValues: new[] { 100, 120, 140, 160 }
    );
    chart.Save("~/mychart.png");
}

该图表将保存为 /mychart.png 图像文件，可直接在网页中 <img src="mychart.png"> 引用。

⚠️ 注意事项

  • Chart 帮助器使用的是服务器端图表渲染，生成的是 <img> 标签，适合不需要动态交互的场景。
  • 图表生成过程依赖 GDI+ 图形引擎，部署时确保服务器支持图像绘制。
  • 图表不能像 JavaScript 图表库那样动态交互（如悬停提示、缩放等）。

🌐 出站链接推荐

📚 参考资料

  1. Microsoft Learn – ASP.NET Web Pages – Chart Helper 教程
  2. 《ASP.NET Web Pages 实战指南》 – 数据可视化章节
  3. W3Schools – Razor Chart 图表指南