n8n工作流自动化平台的实操：生成统计图的两种方式

1.成果展示

1.1n8n的工作流

 扳连节点：Postgres、Code、QuickChart、Edit Fields、HTTP Request
12.表现结果

 

 
2.实操过程

2.1节点说明

2.1.1Postgres节点：

注：将明细数据举行汇总。 
2.1.2code节点：

注：将 查询的数据转换成QuickChart必要的格式，代码如下：

1. let data = $input.all();
2. let rawData = data.map(item => item.json);
4. // 按年份分组数据
5. const groupedData = rawData.reduce((acc, item) => {
6.     if (!acc[item.nf]) acc[item.nf] = [];
7.     acc[item.nf].push({ month: item.yf, value: parseInt(item.sl) });
8.     return acc;
9. }, {});
11. // 构建完整的12个月份列表，作为 X 轴标签
12. const allMonths = Array.from({ length: 12 }, (_, i) => {
13.     const month = (i + 1).toString().padStart(2, '0'); // 01 - 12
14.     return month;
15. });
17. // 构建 QuickChart 需要的 chartData 格式
18. const chartData = {
19.     type: 'line',
20.     data: {
21.         labels: allMonths, // 使用完整12个月作为 X 轴
22.         datasets: Object.keys(groupedData).map(year => {
23.             // 补全缺失月份的数据为 null（图表上该点为空）
24.             const values = allMonths.map(month => {
25.                 const found = groupedData[year].find(d => d.month === month);
26.                 return found ? found.value : null;
27.             });
29.             return {
30.                 label: `${year}年 事故起数`,
31.                 data: values,
32.                 borderColor: getRandomColor(),
33.                 fill: false,
34.                 pointRadius: values.map(v => v !== null ? 3 : 0), // 可选：隐藏空值点
35.             };
36.         })
37.     },
38.     options: {
39.         responsive: true,
40.         scales: {
41.             xAxes: [{
42.                 scaleLabel: {
43.                     display: true,
44.                     labelString: '月份'
45.                 }
46.             }],
47.             yAxes: [{
48.                 ticks: {
49.                     beginAtZero: true
50.                 },
51.                 scaleLabel: {
52.                     display: true,
53.                     labelString: '事故起数'
54.                 }
55.             }]
56.         }
57.     }
58. };
60. // 随机颜色生成函数
61. function getRandomColor() {
62.     const r = Math.floor(Math.random() * 256);
63.     const g = Math.floor(Math.random() * 256);
64.     const b = Math.floor(Math.random() * 256);
65.     return `rgba(${r},${g},${b},1)`;
66. }
68. return chartData;

复制代码

2.1.3Edit Fields节点：

注：将json对象转换成字符串，主要图中的红框。 
2.1.4HTTP Request节点：

 

注：通过https://quickchart.io/chart?width=650&height=450&c={{ $json.data }}实现图片的生成，图中红框部分。
通过 QuickChart节点，最后也是转成url地点。因此不能在无互联网的环境下生成图片，希望有缘人提供更好的思路。
2.1.5QuickChart节点：

注：生成单曲线，单柱状图，通过 QuickChart节点没有题目，假如有上传多条曲线，则无法实现，只能通过https://quickchart.io/chart?width=650&height=450&c={{ $json.data }}方式实现。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

继续阅读请点击广告