嘿，我来帮你搞定这个多系列实时Chart.js图表的问题！从你的描述来看，单个PHP接口返回的数据没问题，那核心问题就是前端怎么并行请求多个接口，并把每个接口的数据对应到Chart.js的不同数据集里。下面给你一步步拆解解决方案：

第一步：确认PHP文件的正确性 #

首先要确保每个交易所的PHP文件都返回正确的JSON格式，并且设置了响应头。比如你的bitstamp.php应该是这样的：

<?php
// 必须设置JSON类型的响应头，否则前端解析会出错
header('Content-Type: application/json');

// 这里替换成你获取Bitstamp BTC价格的逻辑（比如调用官方API、读数据库等）
$timestamp = time() * 1000; // 转换成毫秒时间戳，和Chart.js的时间轴兼容
$price = 9932.83; // 示例价格

// 输出符合要求的数组JSON
echo json_encode([$timestamp, $price]);
?>

如果你的HTML和PHP文件不在同一个域名下，还要加CORS头（开发环境可以临时用*，生产环境记得指定具体域名）：

header('Access-Control-Allow-Origin: *');

第二步：前端实现多数据系列加载 #

接下来是前端代码，核心思路是用Promise.all并行请求所有交易所接口，然后把每个接口的数据对应到Chart.js的独立数据集里。

HTML部分（先放图表容器）

<canvas id="btcPriceChart" width="800" height="400"></canvas>

JS部分（核心逻辑）

// 1. 定义所有交易所的PHP接口地址（顺序要和下面的数据集配置对应！）
const exchangeUrls = [
  'bitstamp.php',
  'coinbase.php',
  'binance.php' // 替换成你实际的其他交易所PHP文件
];

// 2. 定义每个数据系列的样式配置（标签、颜色等）
const exchangeDatasetConfigs = [
  { label: 'Bitstamp', borderColor: '#3e95cd', fill: false, tension: 0.1 },
  { label: 'Coinbase', borderColor: '#8e5ea2', fill: false, tension: 0.1 },
  { label: 'Binance', borderColor: '#3cba9f', fill: false, tension: 0.1 }
];

// 3. 初始化Chart.js图表
const ctx = document.getElementById('btcPriceChart').getContext('2d');
const btcPriceChart = new Chart(ctx, {
  type: 'line',
  data: {
    // 给每个配置初始化空数据数组
    datasets: exchangeDatasetConfigs.map(config => ({ ...config, data: [] }))
  },
  options: {
    scales: {
      x: {
        type: 'time', // 用时间轴自动处理时间戳
        time: { unit: 'minute' }, // 根据数据更新频率调整单位
        title: { display: true, text: '时间' }
      },
      y: {
        title: { display: true, text: 'BTC价格 (USD)' },
        beginAtZero: false
      }
    },
    animation: false, // 实时更新不需要动画，更流畅
    responsive: true
  }
});

// 4. 编写批量获取数据并更新图表的函数
async function updateAllPriceSeries() {
  try {
    // 并行请求所有接口，比逐个请求效率高，适合实时场景
    const allResponses = await Promise.all(
      exchangeUrls.map(url => fetch(url).then(res => res.json()))
    );

    // 遍历每个响应，对应到图表的数据集
    allResponses.forEach((priceData, index) => {
      // 校验数据格式是否正确：必须是[时间戳, 价格]的数组
      if (Array.isArray(priceData) && priceData.length === 2 && !isNaN(priceData[0]) && !isNaN(priceData[1])) {
        // 把数据转换成Chart.js时间轴需要的{x,y}格式
        const newDataPoint = { x: priceData[0], y: priceData[1] };
        
        // 添加新数据点到对应数据集
        btcPriceChart.data.datasets[index].data.push(newDataPoint);
        
        // 限制数据点数量（比如只保留最近100个），避免图表卡顿
        if (btcPriceChart.data.datasets[index].data.length > 100) {
          btcPriceChart.data.datasets[index].data.shift();
        }
      }
    });

    // 更新图表显示
    btcPriceChart.update();
  } catch (error) {
    // 捕获错误，避免一个接口挂了导致整个更新崩溃
    console.error('获取价格数据失败:', error);
  }
}

// 5. 启动实时更新：初始加载一次，然后每隔5秒刷新（按需调整间隔）
updateAllPriceSeries();
setInterval(updateAllPriceSeries, 5000);

关键注意点 #

• 顺序对应：exchangeUrls和exchangeDatasetConfigs的顺序必须完全一致，这样每个接口返回的数据才会对应到正确的图表系列。
• 数据格式：把PHP返回的[时间戳,价格]转换成{x,y}格式，Chart.js的时间轴能更好地识别和渲染。
• 错误处理：用try-catch包裹请求逻辑，就算某个交易所的接口出错，其他系列依然能正常更新。
• 数据量控制：用shift()删除最早的数据点，防止数据过多导致图表性能下降。

这样调整之后，你应该就能看到各个交易所的BTC价格在同一个图表里实时更新啦！

内容的提问来源于stack exchange，提问作者Og Qryptos