如何将JSON数组转换为对象并适配Chart.js绘图

你需要把API返回的[日期字符串, 哈希值]子数组，转换为Chart.js要求的{x: 时间, y: 数值}对象数组，最直接的方法是使用数组的map方法，无需复杂的字符串处理或错误的循环逻辑。

核心转换逻辑 #

对每个数据源数组（比如d1和d2），用map遍历每个子数组，将其重构为目标格式：

// 转换d1为Chart.js格式
const chartData1 = d1.map(item => ({
  x: item[0], // 子数组第一个元素是时间字符串
  y: item[1]  // 子数组第二个元素是哈希值/数值
}));

// 同理转换d2
const chartData2 = d2.map(item => ({
  x: item[0],
  y: item[1]
}));

修正后的完整代码 #

替换你原代码中转换部分的逻辑，完整代码如下：

function grab() {
  return new Promise((resolve, reject) => {
    $.getJSON({
      url: "/hash_results_page/",
      cache: false,
      method: "GET",
      dataType: "JSON",
      success: function (data) {
        resolve(data);
      },
      error: function (error) {
        reject(error);
      },
    });
  });
}

$(document).ready(function () {
  grab().then((data) => {
    var ctx = document.getElementById("hashchart").getContext("2d");

    var d1 = data[0];
    var d2 = data[1];
    console.log("Hashrate Data-0:", d1);
    console.log("Average Data-1:", d2);

    // 关键转换逻辑
    const chartData1 = d1.map(item => ({
      x: item[0],
      y: item[1]
    }));
    const chartData2 = d2.map(item => ({
      x: item[0],
      y: item[1]
    }));

    // 此时chartData1和chartData2就是Chart.js可用的格式
    console.log("转换后的Hashrate数据:", chartData1);
    console.log("转换后的Average数据:", chartData2);

    // 后续可以直接用这两个数组初始化Chart.js图表
    // new Chart(ctx, {
    //   type: 'line',
    //   data: {
    //     datasets: [
    //       {
    //         label: 'Hashrate',
    //         data: chartData1,
    //         borderColor: 'red'
    //       },
    //       {
    //         label: 'Average',
    //         data: chartData2,
    //         borderColor: 'blue'
    //       }
    //     ]
    //   }
    // });
  });
});

你原代码中的问题说明 #

1. 错误的for循环：for (var i = 0; i < d1.length; i++)里使用d1[i++]会让i每次循环增加2，导致跳过一半的元素，无法遍历所有数据。
2. 多余的JSON操作：JSON.stringify和JSON.parse的操作完全没必要，API返回的已经是可直接操作的数组，不需要转成字符串再解析。

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