React中如何将API返回数据转换为react-google-charts折线图要求格式

你可以直接通过数组的map方法完成格式转换，处理逻辑如下：

基础转换（保留原返回数据顺序） #

// 此处的apiData为你从接口拿到的返回数组
const chartData = [
  ["Date", "Realizado"], // 固定符合图表要求的表头
 ...apiData.map(item => [item.period, item.value])
]

可选：按时间升序排列数据 #

你接口返回的原始数据是按时间从新到旧排列的，如果需要折线图按时间从早到晚展示，可以在转换前增加排序逻辑：

const chartData = [
  ["Date", "Realizado"],
 ...apiData
    // 按时间戳升序排序
   .sort((a, b) => new Date(a.period) - new Date(b.period))
   .map(item => [item.period, item.value])
]

可选：数值精度处理 #

如果需要对value做小数位数裁剪，比如保留2位小数，可以调整map内的逻辑：

.map(item => [item.period, Number(item.value.toFixed(2))])

处理后得到的chartData可以直接传入react-google-charts组件的对应属性使用。

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