如何在.NET API服务端渲染Highcharts（无需运行Node.js服务）

以下两种方案均不需要额外托管、运行Node.js服务，渲染效果与Node.js环境下的服务端渲染结果完全一致。

方案1：基于Puppeteer Sharp的全兼容渲染方案 #

该方案适配100% Highcharts配置项，支持所有图表类型，和前端浏览器渲染效果无差异。

• 第一步：在Web API项目中安装NuGet包 PuppeteerSharp，同时将Highcharts的JS静态文件放入项目的资源目录，无需依赖外部CDN。
• 第二步：直接复用你原本在前端使用的Highcharts配置对象，无需修改格式。
• 第三步：调用渲染逻辑，示例代码如下：

using PuppeteerSharp;
using System.Text.Json;

public async Task<byte[]> RenderHighchartAsync(object chartConfig, int width = 800, int height = 400)
{
    // 首次运行自动下载配套Chromium运行时，无需手动安装任何依赖
    using var browserFetcher = new BrowserFetcher();
    await browserFetcher.DownloadAsync();
    await using var browser = await Puppeteer.LaunchAsync(new LaunchOptions
    {
        Headless = true,
        Args = new[] { "--no-sandbox" } // Linux服务器部署必填参数
    });
    await using var page = await browser.NewPageAsync();

    // 构造最小HTML渲染模板
    var htmlTemplate = $@"
    <html>
    <head>
        <script src='~/static/highcharts.js'></script>
    </head>
    <body>
        <div id='container' style='width:{width}px;height:{height}px;'></div>
        <script>
            Highcharts.chart('container', {JsonSerializer.Serialize(chartConfig)});
        </script>
    </body>
    </html>";

    await page.SetContentAsync(htmlTemplate);
    // 等待图表渲染完成
    await page.WaitForSelectorAsync("#container svg", new WaitForSelectorOptions { Timeout = 3000 });
    var chartContainer = await page.QuerySelectorAsync("#container");
    // 支持导出为PNG、JPG、SVG、PDF格式，此处返回PNG字节流
    return await chartContainer.ScreenshotDataAsync();
}

你可以直接在API接口中返回该字节流，设置对应的Content-Type即可直接向客户端返回图片，也可存储到本地/对象存储。

方案2：Highcharts官方.NET导出库（无浏览器依赖） #

如果不希望引入Chromium运行时依赖，可以选择Highcharts官方封装的.NET导出工具包，包体积更小，启动速度更快，仅部分极冷门的高级图表配置存在兼容性差异。

• 第一步：安装NuGet包 Highcharts.Exporting.Net
• 第二步：调用导出逻辑，示例代码如下：

using Highcharts.Exporting;

public byte[] RenderHighchartWithOfficialLib(HighchartsOptions options)
{
    var exporter = new HighchartsExporter();
    var exportOptions = new ExportOptions
    {
        Type = ExportType.Png,
        Width = 800,
        Scale = 2 // 输出2倍高清图
    };
    return exporter.Export(options, exportOptions);
}

部署注意事项 #

• 若使用Puppeteer Sharp方案，Linux服务器需要提前安装Chromium依赖组件：libglib2.0-0、libnss3、libnspr4、libatk1.0-0、libatk-bridge2.0-0、libcups2、libdrm2、libdbus-1-3、libxkbcommon0、libxcomposite1、libxdamage1、libxext6、libxfixes3、libxrandr2、libgbm1、libpango-1.0-0、libcairo2、libasound2
• 两种方案均完全运行在.NET运行时环境中，无需任何额外的Node.js相关部署操作。

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