（2025 年依然最强、最美、零 JavaScript 的图表神器）
Chart 是 ASP.NET Web Pages 内置的超级强大图表帮助器，一行代码就能生成柱状图、折线图、饼图、面积图……，自动输出高清 PNG，完美支持中文、防锯齿、主题、导出、动态数据。
一、最快上手：5 行代码出图表
<!-- ChartDemo.cshtml -->
@{
var db = Database.Open("MyShop");
var data = db.Query(@"SELECT DATEPART(year,AddTime) AS Year,
DATEPART(month,AddTime) AS Month,
SUM(Total) AS Sales
FROM Orders
WHERE AddTime >= @0
GROUP BY DATEPART(year,AddTime), DATEPART(month,AddTime)
ORDER BY Year, Month",
DateTime.Now.AddYears(-1));
var chart = new Chart(width: 800, height: 400, theme: ChartTheme.Vanilla3D)
.AddTitle("过去12个月销售额趋势")
.AddLegend("销售额（元）")
.AddSeries(
name: "月度销售额",
chartType: "Line", // 可选：Column, Bar, Pie, Area, Doughnut, Radar...
xValue: data, xField: "Month",
yValues: data, yFields: "Sales")
.AddSeries(
chartType: "Column",
name: "对比",
xValue: new[] { "1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月" },
yValues: new double[] { 12000, 19000, 15000, 28000, 32000, 41000, 38000, 52000, 48000, 61000, 73000, 89000 })
.Write(); // 重点！直接输出图表
}直接访问 /ChartDemo.cshtml 就能看到超漂亮的 3D 折线 + 柱状组合图！
二、Chart 常用 chartType（12 种主流图表全支持）
| 类型 | 代码写法 | 适合场景 |
|---|---|---|
| Column | "Column" | 柱状图（最常用） |
| Bar | "Bar" | 横向柱状图 |
| Line | "Line" | 折线图（趋势） |
| Spline | "Spline" | 平滑曲线 |
| Area | "Area" | 面积图 |
| Pie | "Pie" | 饼图 |
| Doughnut | "Doughnut" | 环形图（更美观） |
| Radar | "Radar" | 雷达图 |
| Polar | "Polar" | 极坐标图 |
| StackedColumn | "StackedColumn" | 堆叠柱状图 |
| Bubble | "Bubble" | 气泡图 |
| Point | "Point" | 散点图 |
三、10 个生产环境最美图表示例（直接复制）
@* 1. 经典蓝色柱状图 *@
new Chart(600, 350, theme: ChartTheme.Blue)
.AddTitle("2025年各季度销售额")
.AddSeries("Default", xValue: new[] { "Q1", "Q2", "Q3", "Q4" },
yValues: new[] { 120000, 190000, 280000, 350000 })
.Write();
@* 2. 超美绿色主题折线图 *@
new Chart(800, 400, theme: ChartTheme.Green)
.AddTitle("网站日访问量趋势")
.AddLegend("PV")
.AddSeries(chartType: "Spline",
xValue: new[] { "周一","周二","周三","周四","周五","周六","周日" },
yValues: new[] { 5800, 6200, 5900, 7800, 9200, 11000, 13500 })
.Write();
@* 3. 3D 饼图 + 数据标签 *@
new Chart(500, 400, theme: ChartTheme.Vanilla3D)
.AddTitle("产品销量占比")
.AddSeries(chartType: "Pie",
xValue: new[] { "手机", "电脑", "平板", "配件" },
yValues: new[] { 45, 30, 18, 7 })
.DataLabels(true) // 显示百分比
.Write();
@* 4. 动态生成图表并保存为文件（后台报表）*@
@{
var myChart = new Chart(900, 500);
myChart.AddTitle("月度销售报表");
myChart.AddSeries("Default", data);
myChart.Save("~/Reports/sales_" + DateTime.Now.ToString("yyyyMMdd") + ".png", "png");
<p>报表已生成：<a href="~/Reports/sales_@DateTime.Now:yyyyMMdd.png">下载</a></p>
}四、所有常用方法速查表
| 方法 | 说明 | 示例 |
|---|---|---|
.AddTitle("标题") | 设置标题 | |
.AddLegend("图例") | 添加图例 | |
.AddSeries(...) | 添加数据系列（可多次调用） | |
.DataLabels(true) | 显示数据标签（饼图必备） | |
.SetXAxis("X轴标题") | 设置 X 轴标题 | |
.SetYAxis("Y轴标题") | 设置 Y 轴标题 | |
.Write() | 直接输出到浏览器（最常用） | |
.Save(path) | 保存为文件（png/jpg） | .Save("~/images/chart.png") |
.GetBytes("png") | 返回字节数组（可用于邮件附件） | var bytes = chart.GetBytes("png"); |
theme: ChartTheme.xxx | 内置主题（超美！） | Vanilla3D、Blue、Green、Yellow |
五、Chart 主题一览（直接复制主题名）
ChartTheme.Vanilla3D // 最美 3D 主题（强烈推荐！）
ChartTheme.Blue
ChartTheme.Green
ChartTheme.Yellow
ChartTheme.Red
ChartTheme.Vanilla六、终极技巧：封装成帮助器（全站一键调用）
<!-- App_Code/ChartHelper.cshtml -->
@helper SalesTrend(int months = 12)
{
var db = Database.Open("MyShop");
var data = db.Query(@"SELECT TOP @0
FORMAT(AddTime,'yyyy-MM') AS MonthName,
SUM(Total) AS Sales
FROM Orders
GROUP BY FORMAT(AddTime,'yyyy-MM')
ORDER BY MonthName DESC", months);
new Chart(800, 400, theme: ChartTheme.Vanilla3D)
.AddTitle($"近 {months} 个月销售趋势")
.AddLegend("销售额")
.AddSeries(chartType: "Area",
xValue: data, xField: "MonthName",
yValues: data, yFields: "Sales")
.Write();
}页面中使用：
<h2>销售报表</h2>
@ChartHelper.SalesTrend(6) <!-- 最近6个月 -->
@ChartHelper.SalesTrend(12) <!-- 最近12个月 -->七、为什么 Chart 帮助器至今无敌？
| 功能 | Chart 帮助器 | 其他方式（如 Chart.js） |
|---|---|---|
| 是否需要 JS | 完全不需要 | 必须引入 100KB+ JS |
| 是否支持中文 | 完美支持 | 需要额外字体配置 |
| 是否防锯齿 | 内置高清抗锯齿 | 部分浏览器差 |
| 是否支持导出 | 一键 Save/GetBytes | 需要额外插件 |
| 代码量 | 5-15 行 | 50-200 行 |
| 服务器端生成 | 是（防数据泄露） | 否（数据暴露在前端） |
结论：在 ASP.NET Web Pages 项目中，只要能用 Chart，就绝对不要用 JavaScript 图表！
需要我给你一个「终极 Chart 帮助器合集」（20+ 种常用图表：销售趋势、用户增长、地区分布、热力图、仪表盘、排行榜……）吗？
一个文件放进 App_Code，全站任何页面 @ChartHelper.xxx() 就能出企业级高清图表！2025 最新美化版，随时说一声就发你！
