如何使用JS（Node.js、Express.js）在服务器端生成图表PNG/JPEG图片

嗨，我来给你梳理几个靠谱的服务器端生成图表图片的方案——完全不需要浏览器渲染，直接在Node.js/Express环境搞定，生成后还能存在服务器上复用，完美匹配你的需求！

这应该是最贴近前端开发习惯的方案，毕竟Chart.js大家都熟，配合node-canvas就能在Node环境模拟浏览器的Canvas上下文，直接生成图片，上手零门槛。

步骤： #

1. 先装依赖：

npm install chart.js canvas express

2. Express接口示例代码：

const express = require('express');
const { createCanvas } = require('canvas');
const Chart = require('chart.js/auto');
const fs = require('fs');
const path = require('path');

const app = express();
const PORT = 3000;

// 封装生成+保存图表的函数
async function generateAndSaveChart() {
  // 创建固定尺寸的画布
  const canvas = createCanvas(800, 600);
  const ctx = canvas.getContext('2d');

  // 配置Chart.js图表——和前端写法几乎一模一样
  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['一月', '二月', '三月', '四月'],
      datasets: [{
        label: '月度销售额',
        data: [1200, 1900, 3000, 2500],
        backgroundColor: 'rgba(54, 162, 235, 0.5)',
        borderColor: 'rgba(54, 162, 235, 1)',
        borderWidth: 1
      }]
    },
    options: {
      responsive: false, // 固定画布尺寸，关掉响应式
      scales: {
        y: { beginAtZero: true }
      }
    }
  });

  // 生成图片缓冲区并保存到服务器
  const outputDir = path.join(__dirname, 'saved-charts');
  const outputPath = path.join(outputDir, 'sales-bar-chart.png');
  
  // 确保存储目录存在
  if (!fs.existsSync(outputDir)) {
    fs.mkdirSync(outputDir, { recursive: true });
  }
  // 支持PNG/JPEG，JPEG可以加质量参数（0-1）
  const buffer = canvas.toBuffer('image/png');
  // 换成JPEG：canvas.toBuffer('image/jpeg', { quality: 0.9 })
  fs.writeFileSync(outputPath, buffer);
  
  return outputPath;
}

// 定义接口触发生成
app.get('/generate-chart', async (req, res) => {
  try {
    const chartPath = await generateAndSaveChart();
    res.send(`图表已保存到服务器：${chartPath}，后续直接复用该路径即可`);
  } catch (err) {
    res.status(500).send(`生成失败：${err.message}`);
  }
});

app.listen(PORT, () => {
  console.log(`服务器跑在 http://localhost:${PORT}`);
});

这个方案的优点是学习成本极低，和前端Chart.js用法无缝衔接，生成的图片质量稳定，适合快速实现需求。

如果你需要做3D图、统计类图表这类复杂可视化，Plotly的Node.js版本绝对靠谱——它能直接导出图片，完全脱离浏览器，底层渲染逻辑已经封装得很成熟了。

步骤： #

1. 安装依赖：

npm install plotly.js express fs-extra

2. 代码示例：

const express = require('express');
const plotly = require('plotly.js');
const fs = require('fs-extra');
const path = require('path');

const app = express();
const PORT = 3000;

app.get('/generate-plotly-chart', async (req, res) => {
  try {
    // 定义图表数据和布局——Plotly的配置逻辑也和前端一致
    const data = [
      {
        x: ['一月', '二月', '三月', '四月'],
        y: [1200, 1900, 3000, 2500],
        type: 'bar',
        name: '月度销售额'
      }
    ];

    const layout = {
      title: '2024年Q1销售统计',
      width: 800,
      height: 600,
      yaxis: { title: '金额（元）' }
    };

    // 直接生成图片缓冲区
    const imageBuffer = await plotly.toImage(
      { data, layout }, 
      { format: 'png', width: 800, height: 600 }
    );
    
    // 保存到服务器
    const outputPath = path.join(__dirname, 'saved-charts', 'plotly-sales-chart.png');
    await fs.ensureDir(path.dirname(outputPath));
    await fs.writeFile(outputPath, imageBuffer);

    res.send(`Plotly图表已保存：${outputPath}`);
  } catch (err) {
    res.status(500).send(`生成失败：${err.message}`);
  }
});

app.listen(PORT, () => {
  console.log(`服务器跑在 http://localhost:${PORT}`);
});

Plotly的优势是图表类型极丰富，适合专业可视化场景，导出的图片清晰度拉满，支持png、jpeg、svg等多种格式。

如果你的项目本来就用Highcharts做前端图表，那官方的导出服务器工具就是量身定做的——专门用来在服务器端生成Highcharts图片，完全兼容前端的所有配置，稳定性拉满。

步骤： #

1. 安装依赖：

npm install highcharts-export-server express

2. 代码示例：

const express = require('express');
const exporter = require('highcharts-export-server');
const fs = require('fs');
const path = require('path');

const app = express();
const PORT = 3000;

// 初始化导出服务器池
exporter.initPool();

app.get('/generate-highcharts', async (req, res) => {
  try {
    // 配置Highcharts选项——和前端代码完全一致
    const exportOptions = {
      type: 'png', // 可选jpeg、svg、pdf等
      options: {
        title: { text: '月度销售额统计' },
        xAxis: { categories: ['一月', '二月', '三月', '四月'] },
        yAxis: { title: { text: '金额（元）' } },
        series: [{
          type: 'bar',
          data: [1200, 1900, 3000, 2500]
        }],
        width: 800,
        height: 600
      }
    };

    // 生成并保存图片
    exporter.export(exportOptions, (err, result) => {
      if (err) throw err;

      const outputPath = path.join(__dirname, 'saved-charts', 'highcharts-sales.png');
      if (!fs.existsSync(path.dirname(outputPath))) {
        fs.mkdirSync(path.dirname(outputPath), { recursive: true });
      }
      // 结果是base64格式，直接写入文件
      fs.writeFileSync(outputPath, result.data, 'base64');

      res.send(`Highcharts图表已保存：${outputPath}`);
      // 用完释放资源
      exporter.killPool();
    });
  } catch (err) {
    res.status(500).send(`生成失败：${err.message}`);
  }
});

app.listen(PORT, () => {
  console.log(`服务器跑在 http://localhost:${PORT}`);
});

这个方案的好处是完美兼容Highcharts生态，官方维护，bug少，适合已经在用Highcharts的项目。

生成的图片可以存在服务器的固定目录（比如./saved-charts），建议给每个图表生成唯一文件名（比如用业务ID+时间戳命名），后续需要复用的时候，先检查目标文件是否存在，存在就直接返回路径，不存在再生成，能省不少服务器资源哦～

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