如何拆分API返回的JSON数据并传入ApexCharts绘制图表

解决方法 #

你现有代码的核心问题是异步逻辑顺序错误：fetch是异步请求，你不能在请求返回前就尝试提取cases数据、初始化图表，必须把数据处理和图表渲染逻辑放到请求成功的回调里。
拆分cases对象的逻辑很简单：用Object.keys()取所有日期作为x轴类目，Object.values()取所有确诊数值作为图表序列数据即可。

完整修正代码 #

const dayno = 30;
const url = "https://disease.sh/v3/covid-19/historical/iraq?lastdays=" + dayno;
const requestOptions = {
  method: 'GET',
  redirect: 'follow'
};

fetch(url, requestOptions)
  .then(response => response.json())
  .then(result => {
    // 拿到cases对象
    const cases = result.timeline.cases;
    // 拆分日期和数值
    const dateList = Object.keys(cases);
    const caseCountList = Object.values(cases);

    // 初始化图表配置
    const options = {
      chart: {
        height: 280,
        type: "area"
      },
      dataLabels: {
        enabled: false
      },
      series: [
        {
          name: "伊拉克累计确诊",
          data: caseCountList
        }
      ],
      fill: {
        type: "gradient",
        gradient: {
          shadeIntensity: 1,
          opacityFrom: 0.7,
          opacityTo: 0.9,
          stops: [0, 90, 100]
        }
      },
      xaxis: {
        categories: dateList
      }
    };
    
    const chart = new ApexCharts(document.querySelector("#chart"), options);
    chart.render();
  })
  .catch(error => console.log('error', error));

可选优化：日期格式转换 #

如果需要把接口返回的8/29/21格式转成更易读的格式，可以在拿到dateList后做批量处理，示例：

const formattedDateList = dateList.map(dateStr => {
  const date = new Date(dateStr);
  return `${date.getMonth()+1}月${date.getDate()}日`;
})
// 然后把xaxis的categories换成formattedDateList即可

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