如何统计逗号数量分割文本为数组并转换为JSON供Chart.js使用

核心实现逻辑 #

• 第一步：请求接口获取纯文本返回内容
• 第二步：对返回文本按「每5个逗号为分割边界」拆分单条记录
• 第三步：清洗单条记录的空值，转换为Chart.js折线图适配的JSON结构
• 第四步：初始化Chart.js实例渲染折线图

完整可运行代码 #

HTML 部分 #

<!-- 提前引入jQuery、Chart.js、Chart.js时间适配器依赖 -->
<script src="jQuery本地路径"></script>
<script src="Chart.js本地路径"></script>
<script src="Chart.js时间适配器本地路径"></script>

<!-- 折线图容器 -->
<canvas id="lineChart" width="800" height="400"></canvas>

JavaScript 部分 #

$(function() {
  // 替换为你的返回纯文本的接口地址
  const dataUrl = '你的接口URL';

  // 按每5个逗号分割文本为单条记录的工具函数
  function splitRecordsByCommaCount(rawText) {
    // 先去除所有换行和多余空格
    const cleanedText = rawText.replace(/\s+/g, '');
    let records = [];
    let currentChunk = '';
    let commaCount = 0;
    
    for (let char of cleanedText) {
      currentChunk += char;
      if (char === ',') {
        commaCount++;
        // 累计到5个逗号时完成一条记录切割
        if (commaCount === 5) {
          records.push(currentChunk);
          currentChunk = '';
          commaCount = 0;
        }
      }
    }
    // 过滤末尾空记录
    return records.filter(item => item.trim() !== '');
  }

  // 请求原始数据并处理
  $.get(dataUrl, function(rawData) {
    // 1. 分割得到单条原始记录
    const rawRecords = splitRecordsByCommaCount(rawData);

    // 2. 转换为Chart.js适配的JSON结构
    const chartLabels = [];
    // 四个数据集对应每条记录的2-5位字段，可根据实际业务调整字段数量
    const dataset1 = [];
    const dataset2 = [];
    const dataset3 = [];
    const dataset4 = [];

    rawRecords.forEach(rawRec => {
      // 拆分单条记录字段，取前5个有效项
      const fields = rawRec.split(',').slice(0, 5);
      // 日期作为X轴标签
      chartLabels.push(fields[0]);
      // 空字段转为null，Chart.js会自动跳过断点
      dataset1.push(fields[1] ? Number(fields[1]) : null);
      dataset2.push(fields[2] ? Number(fields[2]) : null);
      dataset3.push(fields[3] ? Number(fields[3]) : null);
      dataset4.push(fields[4] ? Number(fields[4]) : null);
    });

    // 最终适配Chart.js的JSON结构，可直接使用
    const chartData = {
      labels: chartLabels,
      datasets: [
        {
          label: '数据列1',
          data: dataset1,
          borderColor: '#ff0000',
          fill: false
        },
        {
          label: '数据列2',
          data: dataset2,
          borderColor: '#00ff00',
          fill: false
        },
        {
          label: '数据列3',
          data: dataset3,
          borderColor: '#0000ff',
          fill: false
        },
        {
          label: '数据列4',
          data: dataset4,
          borderColor: '#ff9900',
          fill: false
        }
      ]
    };

    // 3. 初始化折线图
    const ctx = document.getElementById('lineChart').getContext('2d');
    new Chart(ctx, {
      type: 'line',
      data: chartData,
      options: {
        responsive: true,
        scales: {
          x: {
            type: 'time',
            time: {
              parser: 'yyyy-MM-dd',
              unit: 'day'
            }
          }
        }
      }
    });
  });
});

注意事项 #

如果不需要时间类型的X轴，可以删除scales下的X轴配置，Chart.js会默认使用分类类型轴展示日期。

内容的提问来源于stack exchange，提问作者Roby Sottini