前端数据处理-数据转换(图表)

79 阅读1分钟

数据转化-如图 Snipaste_2023-04-10_23-07-08.png

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      let data = {
        example: [
          {
            year: "1991",
            value: 7234,
          },
          {
            year: "1992",
            value: 4321,
          },
          {
            year: "1993",
            value: 3312,
          },
          {
            year: "1994",
            value: 4522,
          },
          {
            year: "1995",
            value: 4321,
          },
          {
            year: "1996",
            value: 6322,
          },
        ],
        example1: [
          {
            year: "1991",
            value: 6234,
          },
          {
            year: "1992",
            value: 6321,
          },
          {
            year: "1993",
            value: 6312,
          },
          {
            year: "1997",
            value: 2310,
          },
        ],
      };
      let xData = new Set();
      let tempY = {};
      for (const key in data) {
        tempY[key] = {};
        data[key].forEach((item) => {
          xData.add(item.year);
          tempY[key][item.year] = item.value;
        });
      }
      console.log(data);
    //   console.log(tempY);

      let yData = {};
      for (const key in tempY) {
        let subYdata = [];
        for (let x of xData) {
          if (tempY[key].hasOwnProperty(x)) subYdata.push(tempY[key][x]);
          else subYdata.push(null);
        }
        yData[key] = subYdata;
      }
      console.log("xData", [...xData]);
      console.log("yData", yData);
    </script>
  </body>
</html>