Highcharts读取本地CSV文件生成空白图表问题求助

核心问题列表 #

• 日期格式不兼容
  HighStock的datetime类型X轴要求传入13位Unix时间戳（毫秒级），你当前的处理逻辑存在两处致命错误：
  1. 你的CSV第一列为数值，不存在/分隔符，items[0].split('/')返回的是只有一个元素的数组，完全无法作为时间值使用
  2. 你完全没有用到CSV第四列的时分秒字段，所有数据点的时间值都不合法，导致图表无法渲染点位
• 字段映射错误
  你当前给三个序列赋值的逻辑和CSV字段完全不匹配：
  原CSV每行结构为：字段A,字段B,字段C,时分秒，你现在的逻辑是：

  Cell1.push([date, parseFloat(items[1])]); // 取第二列
  Cell2.push([date, parseFloat(items[2])]); // 取第三列
  Cell3.push([date, parseFloat(items[0])]); // 取第一列
  

  请根据你实际的业务字段定义修正对应关系。
• AJAX请求配置错误
  1. 标准$.ajax没有csv配置项，你应该将请求路径写在url参数中
  2. 动态拉取CSV的逻辑错误：你直接将整个CSV文件按逗号拆分，正确逻辑是先按行拆分，取最新的最后一行数据再按逗号拆分
  3. \\server\test.csv属于SMB本地路径，浏览器出于安全限制无法直接访问该路径，你需要将CSV文件放在和页面同域名的Web服务目录下，用相对路径比如./test.csv访问
• 语法错误
  页面开头重复定义了两次<html>标签，建议删除多余的一个。

核心代码修复示例 #

初始CSV解析逻辑修正 #

$.get('test.csv',function(data) {
  var lines = data.split('\n').filter(line => line.trim() !== ''); // 过滤空行
  $.each(lines, function(lineNo, line) {
    var items = line.split(',');
    // 假设当前日期为今天，拼接时分秒转时间戳，你可以根据实际业务补全日期
    var timeStr = items[3];
    var [hours, minutes, seconds] = timeStr.split(':');
    var today = new Date();
    var timestamp = new Date(today.getFullYear(), today.getMonth(), today.getDate(), hours, minutes, seconds).getTime();
    // 按实际字段需求调整
    Cell1.push([timestamp, parseFloat(items[1])]);
    Cell2.push([timestamp, parseFloat(items[2])]);
    Cell3.push([timestamp, parseFloat(items[0])]);
  });
  // 后续初始化图表逻辑不变
})

动态更新逻辑修正 #

function requestData() {
  $.ajax({
    url: 'test.csv', // 修正为正确的url参数
    success: function(csv) {
      var lines = csv.split('\n').filter(line => line.trim() !== '');
      var lastLine = lines[lines.length - 1]; // 取最后一行最新数据
      var items = lastLine.split(',');
      // 同样处理时间戳
      var timeStr = items[3];
      var [hours, minutes, seconds] = timeStr.split(':');
      var today = new Date();
      var timestamp = new Date(today.getFullYear(), today.getMonth(), today.getDate(), hours, minutes, seconds).getTime();
      
      const point = [timestamp, parseFloat(items[1])];
      const point2 = [timestamp, parseFloat(items[2])];
      const point3 = [timestamp, parseFloat(items[0])];

      chart.series[0].addPoint(point, true, false); // 第三个参数控制是否删除旧点位，按需调整
      chart.series[1].addPoint(point2, true, false);
      chart.series[2].addPoint(point3, true, false);

      setTimeout(requestData, 30000);
    },
    cache: false
  });
}

内容的提问来源于stack exchange，提问作者Jordan Turner