JSP页面HighCharts传感器数据图表仅刷新一次问题求助

当前项目从传感器采集数据存入SQL数据库，通过JSP页面结合HighCharts展示数据，需求是有新数据时自动刷新图表。现有实现通过检查formatteddata数组长度变化触发重绘，但图表仅在定时任务第一次执行后刷新一次，后续无更新。

问题原因 #

你的判断逻辑是对比formatteddata.length（即图表series的数量），但传感器新增数据是每个series的data列表追加新数据，而非新增series，因此formatteddata.length不会发生变化。第一次执行后length_check_temp与length_check值相等，后续不再触发重绘逻辑。

解决方案：复用图表实例+基于数据长度变化判断（推荐） #

通过全局变量保存图表实例，避免重复创建DOM元素，同时对比每个series的data长度变化来判断是否有新数据，触发图表更新：

// 全局保存图表实例
var chartInstance = null;
// 记录每个series的最新数据长度，用于判断新数据
var seriesDataLengths = {};

function multiplelinechartF() {
  $.ajax({
    url: 'multiplelinechart',
    success: function(result) {
      var formatteddata = [];
      for (var key in result) {
        var singleObject = {
          name: key.toUpperCase(),
          data: []
        };
        for (var i = 0; i < result[key].length; i++) {
          singleObject.data.push([Date.parse(result[key][i].time), result[key][i].value]);
        }
        formatteddata.push(singleObject);
      }

      // 检查是否有新数据：对比每个series的data长度
      var hasNewData = false;
      formatteddata.forEach(function(series) {
        var currentLength = seriesDataLengths[series.name] || 0;
        if (series.data.length > currentLength) {
          hasNewData = true;
          seriesDataLengths[series.name] = series.data.length;
        }
      });

      if (hasNewData) {
        if (chartInstance) {
          // 更新现有图表数据，无需重新创建
          chartInstance.update({ series: formatteddata });
        } else {
          // 首次加载创建图表
          chartInstance = drawMultipleChart(formatteddata);
        }
      }
    }
  });
}

$(document).ready(function() {
  // 页面加载时立即执行一次，无需等待定时任务
  multiplelinechartF();
  // 定时刷新（测试时可改短间隔，比如5000=5秒）
  setInterval(multiplelinechartF, 50000);
});

function drawMultipleChart(formatteddata) {
  return Highcharts.chart('container', {
    title: { text: 'Flow Sensors' },
    yAxis: { title: { text: 'Sensors values' } },
    xAxis: {
      title: { text: 'Date' },
      type: 'datetime'
    },
    legend: {
      layout: 'vertical',
      align: 'right',
      verticalAlign: 'middle'
    },
    time: { useUTC: false },
    series: formatteddata,
    responsive: {
      rules: [{
        condition: { maxWidth: 500 },
        chartOptions: {
          legend: {
            layout: 'horizontal',
            align: 'center',
            verticalAlign: 'bottom'
          }
        }
      }]
    }
  });
}

补充说明 #

1. 如果坚持要重新创建图表，可将判断条件改为所有series的data总长度，而非series数量：

var totalDataLength = 0;

function multiplelinechartF() {
  $.ajax({
    url: 'multiplelinechart',
    success: function(result) {
      var formatteddata = [];
      var currentTotalLength = 0;
      for (var key in result) {
        var singleObject = {
          name: key.toUpperCase(),
          data: []
        };
        for (var i = 0; i < result[key].length; i++) {
          singleObject.data.push([Date.parse(result[key][i].time), result[key][i].value]);
        }
        formatteddata.push(singleObject);
        currentTotalLength += singleObject.data.length;
      }

      if (currentTotalLength !== totalDataLength) {
        drawMultipleChart(formatteddata);
        totalDataLength = currentTotalLength;
      }
    }
  });
}

该方案性能不如复用实例的方式，仅作为备选。

2. 调试时可在AJAX的success回调中打印formatteddata和长度值，确认后端接口是否真的返回了新数据，排除后端数据未更新的问题。

内容的提问来源于stack exchange，提问作者Iwona Zwierzyńska