1.成果展示

1.1n8n的工作流

?牽涉節點：Postgres、Code、QuickChart、Edit Fields、HTTP Request

12.顯示效果

?

?

2.實操過程

2.1節點說明

2.1.1Postgres節點：

注：將明細數據進行匯總。?

2.1.2code節點：

注：將 查詢的數據轉換成QuickChart需要的格式，代碼如下：

let data = $input.all();
let rawData = data.map(item => item.json);// 按年份分組數據
const groupedData = rawData.reduce((acc, item) => {if (!acc[item.nf]) acc[item.nf] = [];acc[item.nf].push({ month: item.yf, value: parseInt(item.sl) });return acc;
}, {});// 構建完整的12個月份列表，作為 X 軸標簽
const allMonths = Array.from({ length: 12 }, (_, i) => {const month = (i + 1).toString().padStart(2, '0'); // 01 - 12return month;
});// 構建 QuickChart 需要的 chartData 格式
const chartData = {type: 'line',data: {labels: allMonths, // 使用完整12個月作為 X 軸datasets: Object.keys(groupedData).map(year => {// 補全缺失月份的數據為 null（圖表上該點為空）const values = allMonths.map(month => {const found = groupedData[year].find(d => d.month === month);return found ? found.value : null;});return {label: `${year}年 事故起數`,data: values,borderColor: getRandomColor(),fill: false,pointRadius: values.map(v => v !== null ? 3 : 0), // 可選：隱藏空值點};})},options: {responsive: true,scales: {xAxes: [{scaleLabel: {display: true,labelString: '月份'}}],yAxes: [{ticks: {beginAtZero: true},scaleLabel: {display: true,labelString: '事故起數'}}]}}
};// 隨機顏色生成函數
function getRandomColor() {const r = Math.floor(Math.random() * 256);const g = Math.floor(Math.random() * 256);const b = Math.floor(Math.random() * 256);return `rgba(${r},${g},${b},1)`;
}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 }}方式實現。