在Node js中直接将chart.js图表​​创建为PNG？

Question

有什么方法可以使用 Chart.js 将条形图直接创建为 PNG 文件？我不想在我的网页上显示图表，我想将它作为图像直接发送到 Facebook Messenger。

我使用以下代码在我的网页上创建了一个条形图：

var ctx = document.getElementById("myChart").msGetInputContext("2d");
                var myChart = new Chart(ctx, {
                    type: 'bar',
                    data: {
                        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
                        datasets: [{
                            label: '# of Votes',
                            data: [12, 19, 3, 5, 2, 3],
                            backgroundColor: [
                                'rgba(255, 99, 132, 0.2)',
                                'rgba(54, 162, 235, 0.2)',
                                'rgba(255, 206, 86, 0.2)',
                                'rgba(75, 192, 192, 0.2)',
                                'rgba(153, 102, 255, 0.2)',
                                'rgba(255, 159, 64, 0.2)'
                            ],
                            borderColor: [
                                'rgba(255,99,132,1)',
                                'rgba(54, 162, 235, 1)',
                                'rgba(255, 206, 86, 1)',
                                'rgba(75, 192, 192, 1)',
                                'rgba(153, 102, 255, 1)',
                                'rgba(255, 159, 64, 1)'
                            ],
                            borderWidth: 1
                        }]
                    },
                    options: {
                        scales: {
                            yAxes: [{
                                ticks: {
                                    beginAtZero:true
                                }
                            }]
                        }
                    }
                });

但在这种特殊情况下，我的用户将通过 Facebook Messenger 而不是网页与我的 Node js 应用程序进行交互。我需要一种无需 html canvas 元素即可创建图表的方法，并且可以使用 .toBase64Image() 将图表转换为图像。

在此先感谢您的帮助！

Answer 1

Chart.js 建立在 HTML5 画布元素之上。

要在 node.js 上使用它，你需要在 node.js 中模仿这个元素。

有一个包尝试处理这个porpuse所需的所有库，你可以在这里找到它 chartjs-node

Answer 2

const express = require("express")
const { CanvasRenderService } = require('chartjs-node-canvas');
let app = express()

var configuration = {
    type: 'bar',
    data: {
        labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
        datasets: [{
                label: 'Scored',
                data: [2478,5267,734,784,433],
                        backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                    'rgba(255,99,132,1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
    }]},
    options: {
        scales: {
            yAxes: [{
                ticks: {
                precision:0,
                beginAtZero: true
                }
            }]
        }
    }
}


const mkChart = async (params) => {
    const canvasRenderService = new CanvasRenderService(400, 400)
    return await canvasRenderService.renderToBuffer(configuration);
}

app.get('/chart', async function (req, res) {
    var image = await mkChart(req.query)
    res.type("image/png")
    res.send(image) 
})

app.listen(3061, () => {

})

运行节点脚本，并转到响应图表 png 的“ http://localhost:3061/chart ”

参考：https : //www.npmjs.com/package/chartjs-node-canvas

Answer 3

我遇到了这个问题，并最终构建了一个将 Chart.js 图表呈现为 PNG 图像的 Web 服务。我在这方面开源了我的工作

该服务称为QuickChart。例如，如果您的图表配置是：

{
  type: 'bar',
  data: {
    labels: ['January', 'February', 'March', 'April', 'May'],
    datasets: [{
      label: 'Dogs',
      data: [ 50, 60, 70, 180, 190 ]
    }, {
      label: 'Cats',
      data: [ 100, 200, 300, 400, 500 ]
    }]
  }
}

您可以像这样在 URL 中嵌入 Chart.js 配置：

https://quickchart.io/chart?c={ type: 'bar', data: { labels: ['January', 'February', 'March', 'April', 'May']，数据集：[{标签：'狗'，数据：[50,60,70,180,190]}，{标签：'猫'，数据：[100,200,300,400,500]}]}}

...它将您的图表呈现为图像！

请注意，对于更复杂的图表，您需要对图表选项进行 URL 编码。

QuickChart 网站上有一个交互式编辑器，您可以使用它为给定的图表配置生成 URL。您还可以在此处查看/分叉源代码（它构建在 node-canvas 和 chartjs-node-canvas 之上）。