如何在React Highcharts中集成API数据并转换格式？

步骤1：处理API返回的JSON数据 #

首先需要把API返回的JSON对象转换成Highcharts需要的二维数组格式，核心是过滤掉不需要的字段（比如TotalAmountSpent），再将键值对转为数组项：

// 假设API返回的数据为apiData
const apiData = {
  "Fashion": 40.0,
  "TotalAmountSpent": 20000.0,
  "Food": 60.0
};

// 转换并过滤数据
const chartData = Object.entries(apiData).filter(([key]) => {
  // 排除不需要的字段，保留需要的分类数据
  return key !== 'TotalAmountSpent';
});

// 转换后结果：[['Fashion', 40.0], ['Food', 60.0]]

步骤2：在React组件中集成异步数据与Highcharts #

在React中，我们可以通过状态管理异步获取的数据，确保图表能在数据更新后自动重新渲染：

import React, { useState, useEffect } from 'react';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';

const ExpenseChart = () => {
  // 用状态存储处理后的图表数据
  const [chartData, setChartData] = useState([]);

  useEffect(() => {
    // 异步请求API数据
    const fetchChartData = async () => {
      try {
        const response = await fetch('你的API接口地址');
        const rawData = await response.json();
        
        // 处理数据：过滤无关字段并转换格式
        const processedData = Object.entries(rawData).filter(([key]) => {
          return key !== 'TotalAmountSpent';
        });
        
        // 更新状态，触发图表重新渲染
        setChartData(processedData);
      } catch (err) {
        console.error('数据获取失败:', err);
      }
    };

    fetchChartData();
  }, []);

  // Highcharts配置项
  const chartOptions = {
    chart: {
      type: 'column' // 根据你的实际图表类型调整，比如pie、bar等
    },
    title: {
      text: '支出分类统计'
    },
    xAxis: {
      type: 'category'
    },
    series: [{
      name: '支出占比', // 根据需求自定义系列名称
      data: chartData
    }]
  };

  return (
    <HighchartsReact highcharts={Highcharts} options={chartOptions} />
  );
};

export default ExpenseChart;

关键说明 #

• Object.entries()：将JSON对象的键值对转换为[键, 值]格式的数组，正好匹配Highcharts需要的data结构。
• filter()：用于剔除不需要的字段（比如示例中的TotalAmountSpent），如果后续有更多需要排除的字段，可以在条件中添加，比如return !['TotalAmountSpent', 'OtherField'].includes(key)。
• React状态管理：通过useState存储图表数据，异步请求完成后更新状态，HighchartsReact组件会自动监听配置变化并重新渲染图表。

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