Node.js与Chart.js搭配使用EJS对象时渲染异常，刷新后图表消失

问题根因 #

• EJS中错误地将服务端传入的hora_fecha、valor_tmp数组直接作为字符串塞进了单元素数组，首次渲染刚好匹配格式，刷新后数据累加导致格式完全错误，无法被Chart识别
• 如果你在Node.js全局作用域声明了valor_tmp、hora_fecha数组，这两个变量是服务端全局共享的，每次页面刷新都会往数组里追加新数据，和EJS中写死的单元素结构完全不匹配

方案1：仅展示最新1条温感数据（适配你当前查最新1条的SQL逻辑） #

修正后端JS代码

不要用全局数组存储，每次查询直接返回当前拿到的单条数据即可：

conexion.query('SELECT Temperatura,Fecha_Hora FROM informacion ORDER BY Num_muestras desc LIMIT 1', (error, results) => {
  if (error) {
    console.error('No se ha podido realizar consulta a la base de datos por el error :' + error);
    return res.status(500).send('数据库查询失败')
  }
  const valor_tmp = results[0].Temperatura
  const hora_fecha = results[0].Fecha_Hora
  res.render('historico', {
    data: {
      valor_tmp,
      hora_fecha
    }
  })
})

修正EJS代码

直接渲染单条数据即可：

const labelss = ['<%=data.hora_fecha%>']
const datos = [<%=data.valor_tmp%>]
var ctx = document.getElementById('myChart').getContext('2d')
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: labelss,
        datasets: [{
            label: '温度读数',
            data: datos,
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)'
               
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

方案2：展示所有历史温感数据 #

修正后端JS代码

不要用全局数组存储历史数据，每次查询直接拉取全量历史数据返回，避免全局变量污染：

conexion.query('SELECT Temperatura,Fecha_Hora FROM informacion ORDER BY Num_muestras desc', (error, results) => {
  if (error) {
    console.error('No se ha podido realizar consulta a la base de datos por el error :' + error);
    return res.status(500).send('数据库查询失败')
  }
  const valor_tmp = results.map(item => item.Temperatura)
  const hora_fecha = results.map(item => item.Fecha_Hora)
  res.render('historico', {
    data: {
      valor_tmp,
      hora_fecha
    }
  })
})

修正EJS代码

将服务端传入的数组直接序列化为前端可用的JS数组，避免手动拼接格式错误：

const labelss = <%- JSON.stringify(data.hora_fecha) %>
const datos = <%- JSON.stringify(data.valor_tmp) %>
var ctx = document.getElementById('myChart').getContext('2d')
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: labelss,
        datasets: [{
            label: '温度读数',
            data: datos,
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)'
               
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

内容的提问来源于stack exchange，提问作者Pablo Carrero Garcia