如何使用 NodeJS 创建图表？

Question

是否可以使用 NodeJS 创建图表，例如带有自定义图标的条形图和饼图？

Answer 1

d3可能是你最好的选择。 它可以生成几乎任何类型的可以想象的图表。

您可以直接在浏览器中生成图表，或者如果您确实需要一个图像文件，您可以使用 node 中的模块并将输出转换为图像。

Answer 2

基本上，您可以使用任何图表库。 例如：

• 谷歌图表 API
• 图表
• 图表师

在您的服务器模板代码中，您可能希望使用服务器变量输出数据。 下面使用 swig 模板引擎、ExpressJS 和 Chartist 库的示例

<div class="ct-chart ct-perfect-fourth"></div>
<script>
    new Chartist.Line('.ct-chart', {
        labels: {{ chartLabel | raw }}, 
        series : [{{ charts | raw}}]
    }, {
        axisY: {
            onlyInteger: true
        }
    });
</script>

在此处了解有关其他图表库的更多信息

Answer 3

简单的 Headless NodeJS（不是本地主机或基于网络的）

出于我的目的，我只想 plot 图表而不启动本地主机服务器或任何东西。 所以我使用chartjs-node-canvas和chart.js安装：

npm i chartjs-node-canvas chart.js

在这里我将它写入一个文件以显示它有效但我个人只需要 Base64 字符串上传到某个地方

// Install libs with: npm i chartjs-node-canvas chart.js
// Docs https://www.npmjs.com/package/chartjs-node-canvas
// Config documentation https://www.chartjs.org/docs/latest/axes/
const fs = require('fs');
const { ChartJSNodeCanvas } = require('chartjs-node-canvas');

const width = 400; //px
const height = 400; //px
const backgroundColour = 'white'; // Uses https://www.w3schools.com/tags/canvas_fillstyle.asp
const chartJSNodeCanvas = new ChartJSNodeCanvas({ width, height, backgroundColour });

const configuration = {
    type: 'line',   // for line chart
    data: {
        labels: [2018, 2019, 2020, 2021],
        datasets: [{
            label: "Sample 1",
            data: [10, 15, -20, 15],
            fill: false,
            borderColor: ['rgb(51, 204, 204)'],
            borderWidth: 1,
            xAxisID: 'xAxis1' //define top or bottom axis ,modifies on scale
        },
        {
            label: "Sample 2",
            data: [10, 30, 20, 10],
            fill: false,
            borderColor: ['rgb(255, 102, 255)'],
            borderWidth: 1,
            xAxisID: 'xAxis1'
        },
        ],

    },
    options: {
        scales: {
            y: {
                suggestedMin: 0,
            }
        }
    }
}

async function run() {
    const dataUrl = await chartJSNodeCanvas.renderToDataURL(configuration);
    const base64Image = dataUrl

    var base64Data = base64Image.replace(/^data:image\/png;base64,/, "");


    fs.writeFile("out.png", base64Data, 'base64', function (err) {
        if (err) {
            console.log(err);
        }
    });
    return dataUrl
}
run()

这是文档https://www.npmjs.com/package/chartjs-node-canvas ，配置文档在这里https://www.chartjs.org/docs/latest/axes/

Answer 4

使用highcharts

你必须安装

npm install -g node-highcharts

请参考以下链接

https://github.com/davidpadbury/node-highcharts