reactjs - 数据获取和清理以在 apexcharts 中创建图表

Question

我正在尝试使用从 api 获取数据的 apexcharts 在反应应用程序中构建折线图。折线图的格式是

const options= {
    chart: {
      id: "basic-bar"
    },
    xaxis: {
      categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998]
    },
    stroke: {
      curve: 'smooth',
    }
  };
  const series= [
    {
      name: "series1",
      data: [30, 40, 45, 50, 49, 60, 70, 91]
    },
    {
      name: "series2",
      data: [20, 30, 40, 50, 60, 70, 80, 90]
    },
    {
      name: "series3",
      data: [20, 30, 40, 50, 60, 70, 80, 90]
    }
  ]

  return (
    <>
      <div className="app container container-fluid">
        <div className="row">
          <div className="mixed-chart">
            <Chart
              options={options}
              series={series}
              type="line"
              width="1000"
            />
          </div>
        </div>
      </div>
    </>
  )

api数据是

{
    "1/22/20": 555,
    "1/23/20": 654,
    "1/24/20": 941,
    "1/25/20": 1434,
    "1/26/20": 2118,
    "1/27/20": 2927,
    "1/28/20": 5578,
    "1/29/20": 6167,
    "1/30/20": 8235,
    "1/31/20": 9927,
    "2/1/20": 12038,
    "2/2/20": 16787,
    "2/3/20": 19887,
    "2/4/20": 23898,
    "2/5/20": 27643,
    "2/6/20": 30803,
    "2/7/20": 34396,
    "2/8/20": 37130,
    "2/9/20": 40160,
    "2/10/20": 42769,
    "2/11/20": 44811,
    "2/12/20": 45229,
    "2/13/20": 60382,
    "2/14/20": 66909,
    "2/15/20": 69051,
    "2/16/20": 71235,
    "2/17/20": 73270,
    "2/18/20": 75152,
    "2/19/20": 75652,
    "2/20/20": 76212,
    "2/21/20": 76841,
    "2/22/20": 78602,
    "2/23/20": 78982,
    "2/24/20": 79546,
    "2/25/20": 80399,
    "2/26/20": 81376,
    "2/27/20": 82736,
    "2/28/20": 84121,
    "2/29/20": 86014,
    "3/1/20": 88397,
    "3/2/20": 90375,
    "3/3/20": 92960,
    "3/4/20": 95279,
    "3/5/20": 98043,
    "3/6/20": 102043,
    "3/7/20": 106105,
    "3/8/20": 110063,
    "3/9/20": 114028,
    "3/10/20": 119039,
    "3/11/20": 126721,
    "3/12/20": 132511,
    "3/13/20": 146893,
    "3/14/20": 157969,
    "3/15/20": 169258,
    "3/16/20": 183999,
    "3/17/20": 199931,
    "3/18/20": 219468,
    "3/19/20": 246625,
    "3/20/20": 277262,
    "3/21/20": 309232,
    "3/22/20": 343482,
    "3/23/20": 386867,
    "3/24/20": 428342,
    "3/25/20": 479390
}
 

我想把日期放在 x 轴上，把它的数据放在 y 轴上。另外，我想跳过 5 个数据，就像只取第一个数据，然后是第 6 个，然后是第 11 个，依此类推。

我如何做到这一点？？？

标签： reactjsdata-cleaningapexcharts