如何把PHP经AJAX返回的字符串作为Chart.js图表的数据源？

咱先聊聊你拿到的这段字符串的问题：它是Chart.js配置里data.datasets的片段内容，但包含new Date()这种JavaScript原生构造函数调用，这不属于标准JSON格式，所以没法直接用JSON.parse()解析。下面给你两种可行的解决方案，从简单到安全排序：

方法一：直接作为JS代码执行（适合信任的数据源） #

如果你的PHP返回的内容是完全可信的（比如没有用户输入注入的风险），可以直接把这段字符串转成可执行的JS对象，整合到Chart.js配置里：

// 假设从PHP接口获取到的字符串存在chartDataStr变量中
const chartConfig = {
  type: 'line', // 根据你的需求调整图表类型，比如bar、line等
  data: {
    // 用new Function把字符串转成JS对象
    ...(new Function(`return { ${chartDataStr} }`))()
  },
  options: {
    scales: {
      x: {
        type: 'time', // 因为你的x轴是日期，必须启用时间轴类型
        time: {
          unit: 'month' // 根据数据粒度调整，比如day、week、month
        }
      }
    }
  }
};

// 初始化Chart实例
const ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, chartConfig);

这种方法的核心是用new Function()执行字符串里的JS代码，把它转换成Chart.js能识别的对象。

方法二：转成标准JSON处理（更安全，推荐） #

第一种方法虽然简单，但如果数据源不可控，可能会有XSS风险。更稳妥的做法是修改PHP代码，让它返回标准JSON格式的数据，把日期转成时间戳，再在前端转成Date对象：

第一步：修改PHP输出 #

让PHP把new Date(1523923200000)这类代码替换成直接输出时间戳，返回的JSON结构大概是这样：

{
  "datasets": [
    {
      "label": "Crafting Ideas",
      "borderColor": "#e6194b",
      "fill": false,
      "data": [
        {"x": 1523923200000, "y": 5},
        {"x": 1525305600000, "y": 3}
      ]
    },
    {
      "label": "Punctuation",
      "borderColor": "#3e95cd",
      "fill": false,
      "data": [
        {"x": 1523923200000, "y": 5},
        {"x": 1525305600000, "y": 3}
      ]
    }
  ]
}

第二步：前端处理数据并初始化Chart #

// 用fetch请求PHP接口
fetch('your-php-file.php')
  .then(res => res.json())
  .then(rawData => {
    // 遍历每个数据集，把时间戳转成Date对象
    const processedDatasets = rawData.datasets.map(dataset => ({
      ...dataset,
      data: dataset.data.map(item => ({
        x: new Date(item.x),
        y: item.y
      }))
    }));

    // 初始化Chart
    const ctx = document.getElementById('myChart').getContext('2d');
    new Chart(ctx, {
      type: 'line',
      data: {
        datasets: processedDatasets
      },
      options: {
        scales: {
          x: {
            type: 'time',
            time: {
              unit: 'month'
            }
          }
        }
      }
    });
  });

额外注意点 #

• 如果你用Chart.js v3及以上版本，需要单独安装时间适配器（比如chartjs-adapter-date-fns），否则时间轴无法正常工作；
• 检查PHP返回的字符串是否完整，你提供的示例末尾是{x:new Date(1...，明显是截断了，一定要确保输出的内容语法正确；
• 优先选第二种方法，安全性更高，也更符合前后端数据交互的最佳实践。

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